为什么我不能用行动选择与后代元素

这里是什么，我认为将是简单的CSS一个简单的HTML（注意两个项目是链接和两个都不是）：为什么我不能用行动选择与后代元素

<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>

现在，火狐浏览器，这工作正如我所料，但在Chrome（v24）它没有。

我期望item1和item2在上面没有徘徊时具有#0f0（绿色）颜色，在徘徊时具有#00f（蓝色）颜色。但他们始终是绿色的（在Chrome中）！那么为什么:hover适用于item3和item4，但不适用于item1和item2？

有没有一种方法可以在Chrome中使用，而且还是这么简单？

来源

2013-02-20 zmilojko

似乎在FF工作 – 2013-02-20 10:18:49

@KevinBowersox - 你说得对。编辑问题指出它只是关于Chrome。还会在一个文件中创建一个示例，以便于测试...真的很奇怪，Chrome不喜欢这样。 – zmilojko 2013-02-20 10:26:31

似乎可以在FF和Chrome v24上使用（[示例]（http://codepen.io/anon/pen/iydrz））。 – 2013-02-20 10:30:50

定义li:hover a:hover它应该工作。

来源

2013-02-20 15:54:45

为什么我不能用行动选择与后代元素

回答

相关问题