jquery ui手风琴悬停文字颜色

时间:2015-11-17 18:20:44

标签: javascript html css jquery-ui jquery-ui-accordion

我只是在悬停的部分被折叠时尝试让手风琴的颜色在悬停时改变。

我最接近的是这个,只有当我将鼠标悬停在文本上但不会覆盖手风琴元素的其余部分时才更改文本颜色,并且当该部分处于活动状态时它也会改变颜色。

CSS:

.ui-accordion a:hover{
  color:blue
}

HTML:

<div id="accordion">
    <h5>
        <a href="#">Section 1</a>
    </h5>
    <h5>
        <a href="#">Section 2</a>
    </h5>
</div>

2 个答案:

答案 0 :(得分:1)

对于 jQuery UI Accordion ,您必须将hover应用于.ui-accordion-header而不是.ui-accordion a。如下所示

.ui-accordion-header:hover {
    color: blue;
}

答案 1 :(得分:1)

从我读到的内容中猜测,当它不是开放元素时,你试图只将颜色变为蓝色?

小提琴:http://jsfiddle.net/AtheistP3ace/7jf7cngd/

我在jquery网站上的小提琴示例中使用了h3。你在使用a吗? jQuery自动将.ui-state-active添加到活动状态,因此我利用了它。

.ui-accordion h3:not(.ui-state-active):hover{
  color:blue
}

使用您添加的HTML更新小提琴:http://jsfiddle.net/AtheistP3ace/7jf7cngd/1/

.ui-accordion h5:not(.ui-state-active) a:hover{
  color:blue
}

已更新,包括将鼠标悬停在整个标题上:http://jsfiddle.net/AtheistP3ace/7jf7cngd/23/

.ui-accordion h5:not(.ui-state-active):hover a {
  color: blue
}