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

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.

});