<分区>
我有流动表:
<tr class="popular-link">
<td>text</td>
<td><i class="icon fa fa-camera-retro fa-lg" style="color: green"></i></td>
</tr>
为此 css:
.popular-link:hover {color: #c93434}
我不想在第 i 个元素中包含任何文本
问题是当我将鼠标悬停在这一行上时，只有文本会变色，<i> 不会变色元素。我希望当我将鼠标悬停在文本和 <i> 所在的行上时元素得到这种颜色。
我的问题是:是否可以将相同的规则悬停到 <i>元素？
最佳答案
看看这个。它有效:http://jsfiddle.net/csdtesting/gnz7o2e9/
.popular-link {
color: blue;
}
.popular-link *> .icon {
color: green;
}
.popular-link:hover *> .icon {
color: grey;
}
.icon {
color: red;
}<table>
<tr class="popular-link">
<td>text</td>
<td><i class="icon">mock icon</i>
</td>
<td></td>
<td></td>
</tr>
<tr class="popular-link2">
<td>text</td>
<td class="icon">mock icon</td>
<td></td>
<td></td>
</tr>
</table>关于html - 悬停在 tr 内的所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26238196/