html - 如何更改悬停父元素上的 css 属性？

Question

我有这张表:

<table>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Dad </td></tr>
</table>

我想显示类“momdad”上的图标悬停，因为它实际上是隐藏的，正如您在此 css 中所见:

i{
  visibility: hidden;
}

可以做这样的东西吗？:

.momdad:hover{
    i{
        visibility: visible;
    }
}

感谢您的宝贵时间。

Answer 1

更简单的只是尝试

.momdad:hover i {
    visibility: visible; 
}

这里的例子:

.momdad i {
  background-color: orange;
  visibility: hidden;
}
.momdad:hover i {
    visibility: visible; 
}

<table>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'>icon</i> Hello </td><td> Mom </td></tr>
  <tr><td class="momdad"><i class='glyphicon glyphicon-cog'>icon</i> Hello </td><td> Dad </td></tr>
</table>