为什么我的文字没有随着图标改变颜色？答案

【问题标题】：Why is my text not changing color along with the icon?为什么我的文字没有随着图标改变颜色？
【发布时间】：2021-02-13 04:40:23
【问题描述】：

我试图让 div 中的所有文本在悬停在其上时更改颜色，在 div 中有一个图标和下面的段落，图标正在正确更改颜色，但下面的文本不是。

.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 访问它，但这不是我想要的，因为它只会在您将鼠标悬停在文本本身时改变颜色。

任何帮助将不胜感激。

【问题讨论】：

看起来您在 <p> 上有另一个具有更高特异性的 CSS 规则，但您没有告诉我们，因为文本 is 在鼠标悬停时会改变颜色给出的例子。
是的，我现在找到了它，它解决了我的问题！谢谢

标签： html css colors hover paragraph

【解决方案1】：

因为 p 默认显示块并且 css 的颜色属性不会影响它的具有块显示的孩子为此，您可以这样做如果您希望它们（p 和 i）在用户鼠标移到每个 div 上时都改变颜色：

.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;
    }

【讨论】：

【解决方案2】：

更新您的 css 可能会有所帮助：

.container > div:hover,
.container > div:hover p 
{
      cursor: pointer; 
      color: #fff;
}

【讨论】：

【解决方案3】：

如果我正确理解了你的问题

您添加的颜色代码#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>

【讨论】：