CSS选择器li：仅当其子对象均未悬停时悬停

假设我有HTML

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

当

li>a

悬停时，我想将背景图像更改回arrow.png。
我正在寻找类似的内容

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

---

实际上，当您将鼠标悬停在li内的标记上时，它将触发两个悬停动作。一个用于父li，另一个用于标记，您可以尝试

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

---

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

显然在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 > a").hover(
  function(){
    $this.parent("li").css("background-image", "url(arrow-hover.png)")
  },
  function(){
    $this.parent("li").css("background-image", "url(arrow.png)")
  }
);

---

我认为没有javascript你是做不到的/可能与以下内容重复：

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

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