[英]Change child CSS on parent:hover
我試圖通過將鼠標懸停在父元素上來更改子元素CSS。 以下是我的標記示例:
<ul class="effect">
<li> something here </li>
</ul>
當您將鼠標懸停在UL上時,將發生以下轉換:
.effect:hover{
transform: translate(0,-5px);
-webkit-transform: translate(0,-5px);
-o-transform: translate(0,-5px);
-moz-transform: translate(0,-5px);
}
我的UL元素是深灰色,而LI則用白色和藍色文本設置樣式。 我要這樣做,以使UL變成藍色,而我LI上的藍色文本變成白色。
您可以在此處的滑塊下的標簽中查看我要完成的操作
您可以這樣做:
.effect:hover > li { color: red; }
因此,當您將.effect
元素懸停時,位於該元素正下方的li子元素將受到影響。
<ul class="effect">
<li> <!-- affected -->
<ul>
<li></li> <!-- not affected! -->
</ul>
</li>
</ul>
這對於動態CSS導航很有用,因為並非所有子項都受懸浮影響。
嘗試這個:
.effect:hover .effect li
{
color: #0000ff /* blue color */
}
.effect:hover
{
color: #fff /* white color */
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.