Using jQuery - Hover Effect

One of jQuery facilities that makes coding fast and easy is the ability to assign a method for handling an event.I want to show how to implement Hover Effect for an object .

First lets Prepare required HTML , a table with some rows (like a menu) witch each row contain a column with specified css class.



For distinguishing two modes , normal and hover you can use two css classes .



Note that cursor:hand does not work in firefox .
Now I want to add and remove a css class to each cell by using addClass and removeClass methods of jQuery.
To make hover effect you should handle hover event of each cell. hover event gets two function as arguments , first one for onMouseOver and second one for onMouseOut .



Write codes above as a function in $(document).ready( ) for running on load of page .
lets put it all together .