Question

在悬停时，我正在查看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;
}

Answer 1

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: