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

我有这个表：如何更改悬停父元素上的css属性？

<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; 
    } 
}

感谢您的时间。

来源

2016-11-19 Roberto Sepúlveda

更简单只是尝试

.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>

来源

2016-11-19 11:22:36 caramba

太感谢你了显示子元素！ –

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

div a i将在div元素内选择一个i--element元素。

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

来源

2016-11-19 11:25:04 NikxDa

是的，这是可能的纯CSS：

.momdad:hover i{visibility :visible }

使用CSS当你在元素上悬停，您可以影响该元素本身或其子女或兄弟姐妹旁边和他们的孩子。

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; 
 
}

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

来源

2016-11-19 11:25:12 DigitCart

虽然这段代码可能会解决这个问题，但[包括解释]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有助于提高您的帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性注释来挤占代码，这会降低代码和解释的可读性！ – kayess

你是对的，当我发布这个答案时，我与移动，你可以看到我的其他答案，我一直试图包括解释。 – DigitCart

我只根据你的答案的内容进行判断，但是如果你有时间有机会按照前面提到的编辑它，那么请。 – kayess

是，可以对父元素的悬停

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

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

来源

2016-11-19 11:26:45

其他方式仍然有待执行，这是一个耻辱 – shadownrun

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

回答

相关问题