如何一次更改嵌套HTML元素的字体颜色

Question

我正试图在ul上创建悬停效果，我正试图找到一种方法来更改悬停时ul中元素的字体颜色。

现在我正在使用悬停在单个元素上，如下所示：

.wt-description p:hover {
color: white !important;
}

<div class="col-12">
<ul class="wt-categoryvtwo wt-categoryvthree">
<li>
<div class="wt-categorycontentvtwo">
<figure><img src="#" alt="Category"></figure>
<div class="wt-cattitlevtwo">
<h4><a href="#">Mobiles</a></h4>
</div>
<div class="wt-description">
<p>ios | android | ionic | pwa | flutter | react native more...</p>
</div>
</div>
</li>
</ul>
</div>

但我必须将鼠标悬停在特定元素上才能触发悬停效果。

我只是想知道有没有一种方法可以在悬停时立即将a和p标签的字体颜色更改为白色？

非常感谢您对此的回应。

Answer 1

将悬停添加到包含这两个元素的元素中。在这种情况下，你可以在li或li中的第一个孩子身上进行。或者，如果按照你的描述，它应该同时是整个UL，那么把鼠标悬停在UL上。

li:hover, li:hover a {
color: pink !important;
}

<div class="col-12">
<ul class="wt-categoryvtwo wt-categoryvthree">
<li>
<div class="wt-categorycontentvtwo">
<figure><img src="#" alt="Category"></figure>
<div class="wt-cattitlevtwo">
<h4><a href="#">Mobiles</a></h4>
</div>
<div class="wt-description">
<p>ios | android | ionic | pwa | flutter | react native more...</p>
</div>
</div>
</li>
</ul>
</div>

Answer 2

Hi将a和p元素都保留在div中，并在其上应用悬停效果，在这种情况下，两者都将在您请求的同时变为白色。

<div class="col-12">
<ul class="wt-categoryvtwo wt-categoryvthree">
<li>
<div class="wt-categorycontentvtwo">
<figure><img src="#" alt="Category"></figure>
<div class="selector">
<div class="wt-cattitlevtwo">
<h4><a href="#">Mobiles</a></h4>
</div>
<div class="wt-description">
<p>ios | android | ionic | pwa | flutter | react native more...</p>
</div>
</div>
</div>

使链接继承颜色，然后在div上应用悬停效果，使两个元素同时变为白色：

a{
color:inherit;
}
.selector:hover{
color:white;
}

希望这有帮助：(