javascript - jQuery simply not working?

Question

I have a webpage including the following div:

<div class='book_box'>
    <table border=0 cellspacing=0>
        <tr>
            <td align='center'><img src='img/theseven.jpg' /></td>
        </tr>
        <tr>
            <td align='center'>The Seven by Derek Edgington</td>
        </tr>
    </table>
</div>

And I have this Javascript code in my header:

$('.book_box').hover(
    function() {
        $(this).css('background', '#ffffff');
    },
    function() {
        $(this).css('background', '#a8ff9a');
    }
);

...and it simply doesn't work. I have tested and ensured jQuery is loaded correctly and have performed some other operations with it. This code just seems to not work?

Answer 1

Without any change in code , ITs working for me here is demo on JSFiddle

DEMO

Suggestion : just make use of$(document).ready

$(document).ready(function() {
  $('.book_box').hover( function() {
      alert('abc');
      $(this).css('background', '#ffffff'); 
    },
    function() { 
      alert('abc1');
      $(this).css('background', '#a8ff9a'); 
    } 
  );  
});

Answer 2

You need to put the code in dom ready callback function. Or your code will executes before the .book_box div is ready.

$(function() {
  // put your code here.

});

It is the short cut of

$(document).ready(function() {
  // put your code here.

});

Answer 3

try:

 $('.book_box').hover(
function() {
    $(this).css(backgroundColor, '#ffffff');
},
function() {
    $(this).css(backgroundColor, '#a8ff9a');
}

);

Answer 4

On Firefox and Opera on Linux it is working all right, but maybe you try this:

$(function() {
            $('.book_box table').hover(
            function() {
                $(this).css('background', '#ffffff');
            },
            function() {
                $(this).css('background', '#a8ff9a');
            }
        );
});

Have you took a look at the (Firefox) error console?