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>

我想表明课堂上的“妈妈”悬停，因为实际上是隐藏的，正如你在这个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>

Answer 2

可以通过链接要选择的元素的层次结构来使用CSS选择器。例如：

div a i将在i - 元素内的a - 元素内选择div - 元素。

对于您的代码，这将是正确的选择器：.momdad i。请注意，这将选择i内的所有.momdad，而不仅仅是直接子元素。使用.momdad > i仅选择直接子项。进一步说明：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 3

是，可以在父元素悬停时显示子元素

＆＃13;

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

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

＆＃13;

Answer 4

是的，纯css是可能的：

.momdad:hover i{visibility :visible }

当你将hss悬停在元素上时，你可以影响该元素本身或其子元素或下一个兄弟姐妹及其子元素。

＆＃13;

span {
  background-color: gold;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  width: 20px;
}
div {
  float: left;
  margin: 0 3px;
  width: 20px;
}
div:hover span,
div:hover ~ div span {
  background-color: orange;
}

＆＃13;

<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

＆＃13;

如何在悬停父元素上更改css属性？

4 个答案: