This is a simple sample how to swap div content on mouse hover. Actually I first stumbled upon this web article: http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/. After making few changes I was able to swap actual content of a div instead of background.
Here is the javascript i used (don’t forget to include jQuery library):
1
2
3
4
5
6
7
| $(function(){
$("#vertical div.wrap").hover(function(){
$(this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$(this).stop().animate({top:"0px"},{queue:false,duration:200});
});
}); |
Here is simple CSS styling:
1
2
3
4
5
6
7
8
9
| html,body,div,h2,img {margin:0;padding:0;border:none;}
html { font:1em Arial, Helvetica, sans-serif; color:#444; }
h1 {text-align:center;}
.clear { clear: both; }
#vertical { margin:50px auto; width:920px; }
#vertical div.element { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
.wrap { display: block; height: 260px; width: 296px; position: absolute; top: 0; }
.init { display: block; height: 130px; width:296px; background: #F96; }
.short { display: block; height: 130px; width:296px; background: #69C; } |
And at the end the actual HTML needed:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div id="vertical" class="clear">
<h1>jQuery image slide on hover effect (vertical)</h1>
<div class="element">
<div class="wrap">
<div class="init">Hover over me</div>
<div class="short">On hover content</div>
</div>
</div>
<div class="element">
<div class="wrap">
<div class="init">Hover over me 1</div>
<div class="short">On hover content 1</div>
</div>
</div>
<div class="element">
<div class="wrap">
<div class="init">Hover over me 2</div>
<div class="short">On hover content 2</div>
</div>
</div>
</div> |
Follow Us!