列表项在悬停时更改颜色，而不是在嵌套跨度悬停时

Question

我在span元素中有一个嵌套的li。我希望li的颜色只有在它悬停时才会改变。然而

#sortable li:hover:not(.ce){
  background-color:#3f0;
  cursor:pointer;
}

不起作用。当我的光标在跨度上时，li会改变颜色。如果li只是在它 - 而不是跨度 - 悬停在上面时，我该怎样才能改变颜色？

http://jsbin.com/alExeVO/16/edit

Answer 1

由于您的<span>是<li>的一部分，因此您的代码的行为符合预期。黑客就是在你的跨度中添加一个悬停，以便它变为原始颜色。

Answer 2

为span和li提供自己的悬停功能。看看这个。

SEE DEMO HERE

ul{
list-style-type:circle;
text-align:center;
}
ul li{
   display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}