在一个链接上悬停更改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

MEH，只是做与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/

Answer 2

您需要设置悬停状态在锚上，然后根据选择器。

例如：

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

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