CODEWITHSUNDEEP
javascripthtmlcss
JakePlatford
JakePlatford

Reputation: 136

JS - Move list text on mouse hover

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>

Upvotes: 1

Views: 336

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122077

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>

Upvotes: 5

Related Questions