CSS 선택기를 사용하여 탐색 모음 배경 이미지를 전환하는 방법은 무엇입니까?

효과는 그림과 같습니다:

html 코드:

<p class="banner_area">
<p class="item">
<span class="ck_item one" itemType=&#39;jjjz&#39;></span>
</p>
<p class="item">
<span class="ck_item two" itemType=&#39;jdbg&#39;></span>
</p>
<p class="item">
<span class="ck_item three" itemType=&#39;spbj&#39;></span>
</p>
<p class="item  cur_item">
<span class="ck_item four" itemType=&#39;ssnz&#39;></span>
</p>
<p class="item ">
<span class="ck_item fiv" itemType=&#39;jpnz&#39;></span>
</p>
<p class="item six">
<span class="ck_item six" itemType=&#39;hfcz&#39;></span>
</p>
<p class="item" style="margin-right: 0px;">
<span class="ck_item seven" itemType=&#39;xbsp&#39;></span>
</p>
</p>

css:

.one{background: url(http://img.jiangcdn.com/home/insider/jujz_one.jpg) no-repeat;}
.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_one.jpg) no-repeat;}
.three{background: url(http://img.jiangcdn.com/home/insider/spbj_one.jpg) no-repeat;}
.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_one.jpg) no-repeat;}
.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_one.jpg) no-repeat;}
.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_one.jpg) no-repeat;}
.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_one.jpg) no-repeat;}
.cur_item{width: 218px;height: 53px;}
.cur_item span.one{background: url(http://img.jiangcdn.com/home/insider/jjjz_two.jpg) no-repeat;}
.cur_item span.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_two.png) no-repeat;}
.cur_item span.three{background: url(http://img.jiangcdn.com/home/insider/spbj_two.jpg) no-repeat;}
.cur_item span.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_two.jpg) no-repeat;}
.cur_item span.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_two.jpg) no-repeat;}
.cur_item span.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_two.jpg) no-repeat;}
.cur_item span.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_two.jpg) no-repeat;}

부모 요소 p(class)를 통해span(class='ck_item')을 클릭합니다. ="item ") cur_item 클래스를 동적으로 추가 및 삭제하면 위와 같은 효과를 얻을 수 있습니다.

위 내용은 CSS 선택기를 사용하여 탐색 모음 배경 이미지를 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!