各セクションの矢印アイコンに異なる画像ファイルを使用するにはjqueryアコーディオンが必要です

Question

これまでに尋ねられた1つまたは2つの質問と同様の質問ですが、少し違ったことをするにはアコーディオンが必要です。アコーディオンがアクティブでないときは、すべてのアイコンが同じです。ホバーまたはアクティブな状態にあるときにアイコンを個別に変更する必要があります。

<div id="accordion"> 
<h3 class="acch1"><a class="acc1" href="#">Management and Analysis</a></h3> 
<div> 
</div> 
<h3><a class="acc2" href="#">Communication Management</a></h3> 
<div> 
</div> 

CSS：

.ui-icon { width: 21px; height: 21px; background-image: url(../images/ui-icons_454545_256x240.png); } 
.ui-widget-content .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); } 
.ui-widget-header .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); } 
.ui-state-default .ui-icon { background-image: url(../images/ui-icons_454545_256x240.png); } 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); } 
.ui-state-active .ui-icon {background-image: url(../images/ui-icons_454545_256x240.png); } 

.ui-accordion-header.acch1 .ui-state-hover .ui-icon {background-image: url(../images/ui-icons_669FC5_256x240.png); } 
.ui-accordion-header.acch1 .ui-state-active .ui-icon {background-image: url(../images/ui-icons_669FC5_256x240.png); } 

下の二つは、私が使用しようとしたものであり、私は.ui-状態ホバーと.ui-状態-アクティブに追加するまで、彼らが働きます。

ここで私はあなたがあなたのルールからacch1クラスを削除し、ターゲティングを変更した場合、それが動作するはずと信じてjsfiddle jsfiddle

Answer 1

です。あなたのイメージで次のことを試してみてください。

h3.ui-accordion-header.ui-state-hover span.ui-icon {background-image: url(http://code.jquery.com/ui/1.8.20/themes/base/images/ui-icons_222222_256x240.png); } 
h3.ui-accordion-header.ui-state-active span.ui-icon {background-image: url(http://code.jquery.com/ui/1.8.20/themes/base/images/ui-icons_222222_256x240.png); }​ 

あなたのルールの一部として.acch1クラスを維持することで、あなただけの代わりに、任意のアクティブまたはホバー要素の特定のH3要素をターゲットます。