时间戳

首页 > 解决方案 > 在悬停 p 标签颜色没有改变

html - 在悬停 p 标签颜色没有改变

问题描述

在悬停时，我正在更改背景颜色和文本颜色，悬停时背景颜色会更改，但 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;
}

标签： htmlcss

解决方案

那是因为您在 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>

推荐阅读