html - Chrome/Webkit 悬停问题

Question

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

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

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

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

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

fiddle :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对于相同的。 希望这会有所帮助。

编辑:

如果您只是想在 li.listing 悬停时更改 div.special 的样式，那么请像这样更改您的 CSS:

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

这是一个JSFiddle同样。