在一個鏈接上懸停更改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; 
}