0

这是一个与之前问过的一两个类似的问题，不过我需要手风琴做一些稍微不同的事情。当手风琴处于非活动状态时，所有图标都是相同的，我只需要在它们处于悬停或活动状态时单独更改图标。

<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-state-hover 和 .ui-state-active。

这是 jsfiddle jsfiddle

4

1 回答 1

2

我相信如果您从规则中删除 acch1 类并更改目标，那么它应该可以工作。对您的图像尝试以下操作：

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 回答