css - CSS :hover 仅适用于类的第一个实例

Question

.Row:hover .Contents  { background-color:Blue; }

<div class="Row">
   <span class="Contents">Row Contents</span>
</div>
<div class="Row">
    <span class="Contents">Row Contents</span>
</div>

在上面的示例中，只有第一行内容响应悬停。请参阅http://jsfiddle.net/3JRTQ/。我不确定我做错了什么，特别是因为 .Row .Contents {} 适用于所有实例都很好。

我不想突出显示整行 - 只是带有文本的跨度，但我希望整行响应悬停。

仅使用 CSS 是否可行？

Answer 1

您在 Chrome 25（和 26）中遇到了一个错误。请记住，始终尝试其他浏览器。

Answer 2

修复此示例。使跨度悬停

.Row .Contents:hover  { background-color:Blue; }

或使 Div 成为将要更改的元素：

.Row:hover { background-color:Blue; }

希望这可以帮助