如何更改懸停父元素上的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屬性？

回答

相關問題