CODEWITHSUNDEEP
htmlcssrollover
lowercase
lowercase

Reputation: 1220

Change div image AND text on hover with one link

I have a DIV that needs to change the opacity of an image on rollover AND the color of the text. At the moment rolling over the image triggers the image opacity but has no effect on the text and vice versa.

<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;
}

Any idea to make both events happen via rolling over ANY part of the outside DIV/href?

Upvotes: 1

Views: 947

Answers (2)

ZZZZtop
ZZZZtop

Reputation: 457

You need to set the hover states on the anchor itself, then base the selectors afterwards.

For example:

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

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

Upvotes: 1

Shai UI
Shai UI

Reputation: 51948

meh, just do it with 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/

Or do it on the box itself:

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

#promo-box {

    width:400px;
  height:400px;
}

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

Upvotes: 0

Related Questions