Question

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

<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

Answer 1

我相信如果你从规则中删除了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元素而不是任何活动或悬停元素。

我需要一个jquery手风琴来为每个部分的箭头图标使用不同的图像文件

1 个答案: