Replace div on hover (div rollover)

Question

I have two div with different data. I want to replace div with other on hover.

I can do this in CSS but my data have images and links. so i use image in css i can not put

 <a href=""></a>

on for image. also i have 4 different images in a dive. so i want that when use hover that area my first div should be replaced with 2nd div.

Thank you

Answer 1

No example given so i'm assuming.

HTML

<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>

Javascript (with jQuery)

$("#div1").on('mouseover', function() {
    $("#div2").show();
    $(this).hide();
});

This is not tested so try it out an see if it does what you want.

Answer 2

If you don't want to use javacript you can do it like this.

You can change the content of the divs.

 .child-one{ display : block; } .child-two{ display : none; } .parent:hover .child-one{ display : none }

 <div class="parent"> <div class="child-one"> text of child one </div> <div class="child-two"> text of child two </div> </div>