Chrome / Webkit悬停问题

Question

我在Chrome 46中遇到了这个悬停效果的奇怪错误。

有一个项目列表，只有一些项目应该在悬停时突出显示，但结果不符合预期。 此外，当打开调试并在应该突出显示的元素上启用悬停效果时，它会在之后开始正常工作。

似乎第二个悬停规则没有触发某些元素

ul.listings li.listing:hover {
  border-color: #ccc;
}

ul.listings li.listing:hover div.special {
  color: red!important;
}

小提琴：http://jsfiddle.net/celsum/nLrveyfs/

它在Firefox 42和IE 10中运行良好。

此外，还有一个屏幕截图，显示正在发生的事情，以防其他人无问题：http://snag.gy/oHG9v.jpg

Answer 1

此问题是由于您div.special的身高与li.listing不同。因此，当您只悬停在“特殊”一词时，颜色会变为红色，当您将鼠标悬停在包含div.special的列表上时，颜色不会变为红色（这是我在Chrome 47中发现的问题）。所以为此，我在CSS中添加了一些更改：

div.special{
  height:60px;
} 

ul.listings li.listing div.special:hover{
  color: red!important;
} 

此处还有一个Updated Fiddle。 希望这会有所帮助。

修改

如果您只想在div.special悬停时更改li.listing的样式，请更改您的CSS：

ul.listings li.listing div.image div.special:hover{
  color: red!important;
}

这是一个JSFiddle。