Javascript hover event

Question

I trying to get the following script run on the client-side but currently no rows are being highlighted for the table id = tbDetails

<script type="text/javascript">
    $("#tbDetails tbody tr").hover(

function () {
    $(this).css({
        background: 'yellow'
    });
},

function () {
    $(this).css("background", "");
}
);
</script>

I have debugged the script using the browser tool and the script was throwing the following error - ReferenceError: $ is not defined . I resolved this error by adding the following jquery library to my html but above the script is still not working on my client side.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

here is full view of my html and javascript: JSFiddle HTML example

Any advice?

Answer 1

At first add jQuery to your fiddle. Also remove background-color: #ffffff; from table.gridtable td class.

This is your updated fiddle, that you posted in comments.

Answer 2

Just delete the background-color:#ffffff

table.gridtable td
{
    border-width: 1px;
    padding: 6px;
    border-style: solid;
    border-color: #ffffff;
}

Answer 3

$(this).css("background", ""); should be $(this).css({"background": ""}); and $(this).css({background: 'yellow'}); should be $(this).css({"background": 'yellow'});

$("#tbDetails tbody tr").hover( function () {
        $(this).css({ 'background': 'yellow'});
    },
    function () {
        $(this).css({"background": ""});
    });  

DEMO