Question

这是一个简单的HTML，我认为这将是简单的CSS（注意两个项目是链接，两个不是）：

<html>
  <head>
    <style>
      li.menu:hover {
        background-color: #0ff;
      }

      li.menu a {
        background-color: #0f0;
      }

      li.menu a:hover {
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="menu"><a>item1</a></li>
      <li class="menu"><a>item2</a></li>
      <li class="menu">item3</li>
      <li class="menu">item4</li>
    <ul>
  </body>
</html>

现在，在Firefox中，这可以按照我的预期运行，但在Chrome（v24）中却没有。

我希望item1和item2在上面不悬停时具有#0f0（绿色）颜色，而在悬停时则为#00f（蓝色）颜色。但它们总是绿色的（在Chrome中）！那么为什么:hover适用于item3和item4，而不适用于item1和item2？

有没有一种方法可以在Chrome中运行，仍然很简单？

Answer 1

定义li:hover a:hover，它应该有效。

为什么我不能使用带有后代元素的动作选择器

1 个答案: