首页 文章

在悬停时，p标签的颜色不会改变

提问于
浏览 次
0

在悬停时我正在查看backgorund颜色和文本颜色，在悬停时更改背景颜色，但不更改p标签文本颜色 .

帮帮我们

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;
}
html css

1 回答

  • 1

    这是因为你在p标签上设置了一个颜色，这样就比你在父元素上做的悬停更具体了 . 试试以下

    #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>
    回复于

相关问题