CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 415

On hover p tag color is not changing

On hover I am chaning backgorund color and text color, background color is changed on hover but p tag text color is not changed.

Help me out guys

HTML

<div id="groupInsurance" class="group-insurance">
<img src="images/group-insurance.png" class="insuranceIcon g-img">
<p class="insuranceText">GROUP<br>INSURANCE</p>
</div>

CSS

#groupInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}

#groupInsurance:hover {
    background-color: #1E8449;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.insuranceText {
    font-size: 12px;
    font-weight: bold;
    padding-top: 20px;
    color: #505050;
}

Upvotes: 0

Views: 527

Answers (1)

Dejan.S
Dejan.S

Reputation: 19158

That is because you have a color on set on the p tag so that becomes more specific then the hover you do on the parent element. Try below

#groupInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}

#groupInsurance:hover {
    background-color: #1E8449;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#groupInsurance:hover > .insuranceText {
  color: #fff;
}

.insuranceText {
    font-size: 12px;
    font-weight: bold;
    padding-top: 20px;
    color: #505050;
}
<div id="groupInsurance" class="group-insurance">
<img src="images/group-insurance.png" class="insuranceIcon g-img">
<p class="insuranceText">GROUP<br>INSURANCE</p>
</div>

Upvotes: 1

Related Questions