Question

说我有HTML

<ul>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
</ul>

和CSS

li { padding-left: 20px; background-image: url(arrow.png); }
li:hover { background-image: url(arrow-hover.png); }

我希望在li > a悬停时将背景图片更改回arrow.png。
我正在寻找类似的内容。

li:hover:not(this > a:hover) { background-image: url(arrow-hover.png); }

Answer 1

显然在CSS3中无法做到这一点。（感谢Oswaldo和Evan）

如果有人在寻找类似的解决方案，我必须使用这个JavaScript。

$("li").hover(function () { $(this).addClass('hover'); },
              function () { $(this).removeClass('hover'); });
$("li > *").hover(function () { $(this).parent().removeClass('hover'); },
                  function () { $(this).parent().addClass('hover'); });

并将CSS选择器从li:hover更改为li.hover（或您上面使用的任何类）

li.hover { background-image: url(arrow-hover.png); }

Answer 2

实际上，当你将鼠标悬停在li里面的标签上时，它会触发两个悬停动作..一个用于父li，另一个用于标记，你可以尝试制作

li >a:hover { background-image: url(arrow-hover.png) !important; }

它没有经过测试，但您可以尝试一下......

Answer 3

自从我jQuery之后已经有一段时间但是

$("li > a").hover(
  function(){
    $this.parent("li").css("background-image", "url(arrow-hover.png)")
  },
  function(){
    $this.parent("li").css("background-image", "url(arrow.png)")
  }
);

CSS选择器li：只有当它的子节点都没有悬停时才悬停

3 个答案: