Hover effect with jQuery and CSS
In today’s little tip we are going to make a hover effect using jQuery and CSS.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS
.li_hover{
background: #38A7CB;
}
jQuery
$(document).ready(function() {
$('ul li').hover(function(){
$(this).addClass('li_hover');
},function(){
$(this).removeClass('li_hover');
});
});
Easy as that.
Related posts:
- Zebra stripes with jQuery and CSS
- Sliding door effect with JQuery
- Making a Cool Spotlight Effect with jQuery
- Client side filtering data with jQuery
- Automatic input field focus on page load
Slobodan Kustrimovic
This author has yet to fill his BIO.
Did you absolutely LOVE this article... share it!
Comments
Why use Javascript when you can use CSS?
CSS hover is not supported by IE(link hovering is supported, but other elements aren’t)
Hi, thanks for the tip! CSS has always been my weakest ability – and I easily code in C++, .NET, PHP, MySQL, etc. Any suggestions for people to help? Maybe you? Anyway… nice blog… I’m subscribed to your RSS feed now so I’ll check in more often!
Leave your own!