在悬停时改变ul li ul li的颜色

时间:2014-06-19 17:50:26

标签: html css

我想更改标签li ul li的颜色,但它不会随着给定的html amd css而改变。

HTML

<ul class="s">
    <li>
        <ul>#1
            <li>Hello</li>
             <li>Hello</li>
        </ul>
        <ul>#2
            <li>Hello</li>
             <li>Hello</li>
        </ul>
    </li>
</ul>  

CSS

.s li ul li{
    color:red;
    list-style:none;

}
.s li {
list-style:none;  
}
.s li ul{
    color:green;
}
.s li ul:hover  .s li ul li{
color:black;
}

我创建了一个小提琴 here

在悬停时我需要添加或更改什么才能进行颜色更改?

3 个答案:

答案 0 :(得分:2)

没有元素匹配.s li ul:hover .s li ul li

最后一条CSS规则应该是

.s li ul:hover li{
    color:black;
}

编辑:jQuery的方法需要mouseentermouseleave事件,但hover方法涵盖了这两种情况。

$(document).ready(function() {
   $( ".s li ul" ).hover(
        function() {
   $('li', this ).css('color','black' );
  }, function() {
     $('li', this ).css('color','red' );
  }); 
});

答案 1 :(得分:0)

.s li ul:hover,
.s li ul li:hover {
     color:black;
}

您错过来分隔两个选择器并忘记:悬停

答案 2 :(得分:0)

像这样更改你的悬停css,你忘了最后一个

   .s li ul li:hover{
      color:black;
    }