簡體   English   中英

更改父級上的子級CSS:懸停

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM