Hover Effect: slide right effect in jQuery or in pure CSS3 / 제이쿼리 또는 CSS3를 이용하여 마우스오버했을때 오른쪽방향으로 배경색 채우기

<ul class="lnb">
<li class="on active"><a href="#">mouseover to slide right 01</a></li>
<li><a href="#">mouseover to slide right 02</a></li>
<li><a href="#">mouseover to slide right 03</a></li>
<li><a href="#">mouseover to slide right 04</a></li>
</ul>


<style>
a{color:inherit; width:100%;}
ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;}
ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;}
ul.lnb > li > a {display:block; position:relative; height:36px;}
ul.lnb > li.on > a {background-color:#4d4d4d; color:#fff;}
</style>

<script>
$( document ).ready(function() {
    var lnb=$('.lnb > li');
    lnb.hover(function (){
lnb.removeClass('on');
$(this).css('color','#fff');
$('<a class="clone"></a>').insertBefore($(this));
$('.clone').css('position','absolute').css('height','36px').css('background-color','#4d4d4d').css('left','-300px');
$('.clone').animate({left:"0"},400);
},function(){
$(this).css('color','#4d4d4d');
$('.clone').animate({left:"-300px"},400);
$('.clone').remove();
$('.active').addClass('on');
});
});
</script>


-------------------------------------------------------------------------------------------

<!--Pure CSS-->

<ul class="lnb">
<li class="on active"><a href="#">mouseover to slide right 01</a></li>
<li><a href="#">mouseover to slide right 02</a></li>
<li><a href="#">mouseover to slide right 03</a></li>
<li><a href="#">mouseover to slide right 04</a></li>
</ul>


<style>
a{color:inherit; width:100%;}
ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;}
ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;}

ul.lnb > li > a {
display:block;
position:relative;
height:36px;
 -webkit-transition-property:color;
transition-property:color;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}

ul.lnb > li.on > a {
background-color:#4d4d4d;
color:#fff;
}

ul.lnb > li > a:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
-webkit-background:#4d4d4d;
-webkit-transform:scaleX(0);
transform:scaleX(0);
-webkit-transform-origin:0 50%;
transform-origin:0 50%;
-webkit-transition-property:transform;
transition-property:transform;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}

ul.lnb > li > a:hover:before, ul.lnb > li.on > a:before {
background:#4d4d4d;
transform: scaleX(1);
}

ul.lnb > li > a:hover, ul.lnb > li.on > a {
color:#ffffff;
}

</style>