Mouse Enter

by Pablo Campina

HTML

<a href="#" class="btn-abs prev-new hide show_post">&#9668;</a>
<div class="post-prev content-show">
   <a href="#">
       <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-c-thumb.jpg" width="80" height="80">
       <span>titulo 01</span>
    </a>
</div>

<a href="#" class="btn-abs next-new hide show_post"><span>&#9658;</span></a>
     
<div class="post-next content-show"> 
    <a href="#">
       <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-c-thumb.jpg" width="80" height="80">
       <span>titulo 02</span>
     </a>
</div>

CSS

.btn-abs{
	position:fixed;
	padding:1em .3em;
	background:#344ba0;
	text-decoration:none;
	font-size:1.5em;
	color:#fff;
}

.prev-new{
	top:50%;
	left:0;
}

.next-new{
	top:50%;
	right:0;
}

.next-new span{
	float:right;
}

.post-prev{
	position:fixed;
	background:#344ba0;
	top:50%;
	left:0;
	font-family: 'Oswald', sans-serif;
}

.post-next{
	position:fixed;
	background:#344ba0;
	top:50%;
	right:0;
	font-family: 'Oswald', sans-serif;
}

.post-prev a, .post-next a{
	text-decoration:none;
	color:#fff;
}

.post-prev a img{
	float:left;
}

.post-next a img{
	float:right;
}

.post-prev a span{
	float:right;
	margin:1.7em 0 0 0;
	padding:.5em .7em;
	vertical-align: middle;
}

.post-next a span{
	float:left;
	margin:1.7em 0 0 0;
	padding:.5em .7em;
	vertical-align: middle;
}

JavaScript

$(function(){
	$(".post-prev, .post-next").hide();
    
    $('.show_post').mouseenter(function(){
	   $(this).next().fadeIn('fast');
	})
	
	$('.post-prev, .post-next').mouseleave(function(){
	     $(this).fadeOut('fast');
	})
});