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!
