Html 为什么我的文字不随图标改变颜色？

我试图让一个div中的所有文本在悬停时改变颜色，在div中有一个图标，下面有一个段落，图标正确地改变了颜色，但下面的文本没有

.container>div:悬停
{
光标：指针；
颜色：#fff；
}

随时取消
随时随地观看
选择您的价格

因为p默认显示块，css的颜色属性不会影响其显示块的子项 为此，你可以这样做 如果您希望当用户鼠标移动到每个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;
    }

---

更新css可能会有所帮助：

.container > div:hover,
.container > div:hover p 
{
      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>

.container>div:悬停
{
光标：指针；
颜色：#30fb98；
}
随时取消
随时随地观看
选择您的价格

看起来您在

上找到了另一个更具体的CSS规则，但您没有告诉我们，因为在给定的示例中，悬停时文本的颜色正在改变。是的，我现在找到了它，它解决了我的问题！非常感谢。