为什么我的文本和图标没有变色？

问题描述

我试图将我的所有文本都悬停在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>