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

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

例如：

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

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

Answer 2

是的，只是用jquery

来做

$("#promo-box").hover(
  function() {
    $('.promo-box-image').css('opacity',0.7);
    $('.promo-box-content').css('color','red');
  }, function() {
$('.promo-box-image').css('opacity',1);
   $('.promo-box-content').css('color','black');
  }
);

https://jsfiddle.net/foreyez/jLn252vy/

或者在盒子上做它：

#promo-box:hover {
  opacity:0.7;
  color:red;
}

#promo-box {

    width:400px;
  height:400px;
}

https://jsfiddle.net/foreyez/tkefLx42/

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

2 个答案: