CSS 选择器 li :hover for only when none of its child is hovered

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