Изменить 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

Мех, просто сделать это с 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; 
}