You may have seen that some of the Wikilime hosted sites have some cool mouseover hightlighting effects. Well this is real easy to create, its just a matter of adding one line of code to your CSS.

For this example we will take a look at the bottom sales box on the main page of your cart. The bottom sales box is the section under the product image that holds the description and the price. To create a highlight effect on this element we just need to add the following :

#saleBoxBottom:hover { background-color:#000000; }

This will create a highlight effect with a black background. You can of cause add more syntax to this so that the font and borders also change. Example…

#saleBoxBottom:hover { background-color:#000000; font-weight:bold; border:1px solid #ffffff; }

One last bit of code that you may want to add is the cursor element. This will tell the browser to show the cursor as a hand and not the default arrow when a user hovers the mouse over this element. This just helps to tell the user that this is a link.

#saleBoxBottom:hover { background-color:#000000; font-weight:bold; border:1px solid #ffffff; cursor:hand; cursor: pointer; }

That’s it! easy hey!