Highlight On Mouseover Effect With JQuery

I have seen this effect been used a lot on e-commerce sites or sites with lists in general. I don’t know how they do it exactly but I can show you how I would do it with JQuery.

Take a look at the CSS class I made, what it does is it has a gold background color and round corners for Firefox, Safari and Chrome.

.highlight-yellow
{
background-color:#FFD700;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Let’s make the divisions we will highlighting.

	<div class="product">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
</div>
	<div class="product">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
</div>
	<div class="product">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augue
</div>

All I need now is to make a script that adds the CSS class we just made to the divisions when the mouse is on it, when the mouse moves out of the division I will remove the class.

$(document).ready(function(){
	
 $(".product").mouseover(function(){
	$(this).addClass("highlight-yellow");
 });
 
 $(".product").mouseout(function(){
  $(this).removeClass("highlight-yellow");
 });
 
});

I don’t think I’ve told you about $(this) in any of my previous tutorials, in short, all $(this) does is refer to the current element on which the event (mouseout or mouseover) is been performed. As always, happy JQuerying!

blog comments powered by Disqus