I need some text to move to the right when the mouse hovers over it, here's what I have so far JS:
$("#mainnav li").hover(function() {
$(this).css('padding-left', '50px');});
HTML:
<ul id="mainnav">
<li>hello</li>
<li>hello 1</li>
<li>hello 2</li>
</ul>
If you want to use JQuery you can do it like this, or you can do this with just CSS Fiddle
$('#mainnav li').hover(function() {
$(this).css('padding-left', '30px');
}, function() {
$(this).css('padding-left', '0');
});li {
transition: all 0.3s ease-in;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainnav">
<li>hello</li>
<li>hello 1</li>
<li>hello 2</li>
</ul>