enavu webdevmania tutsvalley psdestination
visit the enavu network
3 Comments Article Title Overlay Article Title

Hover effect with jQuery and CSS

In today’s little tip we are going to make a hover effect using jQuery and CSS.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo(styled)     Source

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:

  1. Zebra stripes with jQuery and CSS
  2. Sliding door effect with JQuery
  3. Making a Cool Spotlight Effect with jQuery
  4. Client side filtering data with jQuery
  5. 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!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting