如何解决为什么我的文本和图标没有变色?
我试图将我的所有文本都悬停在div中以更改颜色,但在div中有一个图标和一个段落,该图标正确地更改了颜色,但下面的文本却没有。 / p>
.container > div:hover
{
cursor: pointer;
color: #fff;
}
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<section class="tabs">
<div class="container">
<div id="tab1" class="tab-item">
<i class="fas fa-door-open fa-3x"></i>
<p class="hide-sm">Cancel at anytime</p>
</div>
<div id="tab2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
我可以通过执行.container > div p:hover
来访问它,但这不是我想要的,因为它只有在将鼠标悬停在文本本身上时才会改变颜色。
任何帮助将不胜感激。
解决方法
更新CSS可能会有所帮助:
.container > div:hover,.container > div:hover p
{
cursor: pointer;
color: #fff;
}
,
因为默认情况下p具有块显示,并且css的color属性不会影响具有块显示的子代 为此,您可以这样做 如果您希望当用户鼠标移至每个div时它们(p和i)全部改变颜色:
.tab-item:hover *
{
cursor: pointer;
color: #fff;
}
如果您希望它们全部在容器上悬停时更改颜色(p&i)
.container:hover *
{
cursor: pointer;
color: #fff;
}
如果那里有一些您不想改变其颜色的东西,则可以单独进行:
.tab-item:hover p,.tab-item:hover i
{
cursor: pointer;
color: #fff;
}
,如果要让所有三个div分别变为白色:
.container:hover p,.container:hover i
{
cursor: pointer;
color: #fff;
}
,
如果我正确理解了您的问题
您添加的#fff颜色代码表示为白色。如果您将颜色代码更改为如下所示的其他内容,则应该能够看到悬停时的区别
<style type="text/css">
.container > div:hover
{
cursor: pointer;
color: #30fb98;
}
</style>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<section class="tabs">
<div class="container">
<div id="tab1" class="tab-item">
<i class="fas fa-door-open fa-3x"></i>
<p class="hide-sm">Cancel at anytime</p>
</div>
<div id="tab2" class="tab-item">
<i class="fas fa-tablet-alt fa-3x"></i>
<p class="hide-sm">Watch anywhere</p>
</div>
<div id="tab3" class="tab-item">
<i class="fas fa-tags fa-3x"></i>
<p class="hide-sm">Pick your price</p>
</div>
</div>
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。