html - 使用一个链接更改悬停时的 div 图像和文本

Question

我有一个 DIV，需要在鼠标悬停时更改图像的不透明度和文本的颜色。目前，在图像上滚动会触发图像不透明度，但对文本没有影响，反之亦然。

<a href="#">
    <div id="promo-box">
        <div class="promo-box-image">
        <img src="img.jpg" />
        </div>
        <div class="promo-box-content">
        Text Content
        </div>
     </div>                       
</a>

.promo-box-image {
    opacity: 0.7;
}
.promo-box-image:hover {
    opacity: 1;
}
.promo-box-content {
    color: #fff;
}
.promo-box-content:hover {
    color: #ffcc00;
}

是否有通过滚动外部 DIV/href 的任何部分来使这两个事件发生的想法？

Answer 1

您需要在 anchor 本身上设置悬停状态，然后将选择器设置为基础。

例如:

a:hover .promo-box-image {
    opacity: 1;
}

a:hover .promo-box-content {
    color: #ffcc00;
}