Question

我试图通过将鼠标悬停在父元素上来更改子元素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则是白色和蓝色文本。我想让它变成蓝色，而我的LI中的蓝色文字变成白色。

您可以在我的标签中，滑块here

下查看我要完成的操作

Answer 1

你可以这样做：

.effect:hover > li { color: red; }

因此，当您悬停.effect元素时，直接位于该元素下的li子元素将受到影响。

<ul class="effect">
  <li> <!-- affected -->
    <ul>
      <li></li> <!-- not affected! -->
    </ul>
  </li>
</ul>

这对于动态CSS导航非常有用，因为不是所有的孩子都会受到悬停的影响..

Answer 2

试试这个：

.effect:hover .effect li
{
    color: #0000ff /* blue color */
}

.effect:hover
{    
    color: #fff /* white color */
}

在父级上更改子CSS：悬停

2 个答案: