CODEWITHSUNDEEP
htmlcsscolorshoverparagraph
SebastianH2
SebastianH2

Reputation: 37

Why is my text not changing color along with the icon?

I'm trying to get all my text within a div to change color while hovering over it, in the div there is an icon and a paragraph underneath, the icon is changing color correctly but the text underneath isn't.

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

I can access it by doing .container > div p:hover but that's not what I want since it only changes color when you hover over the text itself.

Any help will be greatly appreciated.

Upvotes: 0

Views: 365

Answers (3)

Kovalan R
Kovalan R

Reputation: 110

if I understood your question correctly

The color code that you added #fff is indicated white. if you change the color code to something else like below you should be able to see the difference on hover


<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>

Upvotes: 0

Cherryl Rarewings
Cherryl Rarewings

Reputation: 648

Updating your css might help:

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

Upvotes: 1

noshad b.e
noshad b.e

Reputation: 124

because p has display of block by default and color attribute of css would not affect on it's children which has displays of block for that you can do this if you want all of them(p and i) to change color when user mouse goes on each div:

.tab-item:hover *
{
      cursor: pointer; 
      color: #fff;
}

if you want all of them(p&i) change color when you hover on container this

.container:hover *
{
      cursor: pointer; 
      color: #fff;
}

you can to do it sepractly if there is some thing there that you dont want their color be changed:

.tab-item:hover p,
.tab-item:hover i
{
      cursor: pointer; 
      color: #fff;
}

and if you want all three div together become white separately:

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

Upvotes: 0

Related Questions