Question

我有流动的桌子：

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

中的任何文字

example

问题是，当我将鼠标悬停在此行上时，只有文本获取颜色，而不是<i>元素。我希望当我将鼠标悬停在文本和<i>元素获得此颜色的行上时。我的问题是：是否可以将相同的规则悬停在<i>元素上？

Answer 1

如果要突出显示背景使用

，请为文本着色

.popular-link:hover
{
background-color: #c93434;
}

如果你想改变图标颜色，你必须设计一个颜色的图标，并在悬停时使用该图像。

Answer 2

看看这个。它有效：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>

将鼠标悬停在tr内的所有元素中

2 个答案: