css - CSS 选择器 li:hover 仅当其子项未悬停时

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); }

我想在悬停时将背景图像更改回 arrow.png li > a。
我正在寻找这样的东西。

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

Answer 1

显然在 CSS3 中没有办法做到这一点。（感谢奥斯瓦尔多和埃文）

如果有人在寻找类似的解决方案，我不得不使用这个 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)")
  }
);