0

これは以前に尋ねられた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); }

下の2つは私が使用しようとしていたものであり、.ui-state-hoverと.ui-state-activeを追加するまで機能します。

これがjsfiddlejsfiddleです

4

1 に答える 1

2

ルールから ach1 クラスを削除し、ターゲティングを変更すると、機能するはずです。画像で次のことを試してください。

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 要素のみをターゲットにします。

于 2012-05-03T15:42:11.047 に答える