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

【问题标题】：CSS selector li:hover for only when none of its child is hoveredCSS 选择器 li:hover 仅当其子项未悬停时
【发布时间】：2013-03-12 00:46:14
【问题描述】：

假设我有 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); }

【问题讨论】：

我认为没有 javascript 就无法做到这一点；/
可能与以下内容重复：stackoverflow.com/questions/10364511/…

标签： css css-selectors

【解决方案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); }

【讨论】：

【解决方案2】：

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

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

它没有经过测试，但你可以试试......

【讨论】：

【解决方案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)")
  }
);

【讨论】：