jquery code not working

Question

this is my jQuery code

$("ul .thumb li").hover(function () {
            debugger;
            $(this).css({ 'z-index': '10' });
            $(this).find('img').addClass("hover").stop().animate({
                marginTop: '-110px',
                marginLeft: '-110px',
                top: '50%',
                left: '50%',
                width: '174px',
                height: '174px',
                padding: '20px'
            }, 500);

        }, function () {
            $(this).css({ 'z-index': '0' });
            $(this).find('img').removeClass("hover").stop().animate({
                marginTop: '0',
                marginLeft: '0',
                top: '0',
                left: '0',
                width: '100px',
                height: '100px',
                padding: '5px'
            }, 500);
        });

This is my CSS

 ul.thumb
        {
            float: left;
            list-style: none;
            margin: 0;
            padding: 10px;
            width: 360px;
        }
        ul.thumb li
        {
            margin: 0;
            padding: 5px;
            float: left;
            position: relative;
            width: 110px;
            height: 110px;
        }
        ul.thumb li img
        {
            width: 100px;
            height: 100px;
            -ms-interpolation-mode: bicubic;
            border: 1px solid #ddd;
            padding: 5px;
            background: #f0f0f0;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul.thumb li img.hover
        {
            background: url(homePageImage.png) no-repeat center center;
        }

this is my markup

<ul class="thumb">
        <li><a href="#">
            <img src="images/att.jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(10).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/nintendo.jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(11).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(13).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(14).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(3).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(4).jpg" alt="" /></a></li>
        <li><a href="#">
            <img src="images/images%20(3).jpg" alt="" /></a></li>
    </ul>

The images are supposed to enlarge onMouseOver, but nothing's happening ! help appreciated.

Answer 1

It's ul.thumb.

ul .thumb selects any descendents of any ul, which have thumb class. You wanted to select uls with the thumb class.

Example of it working (sort of)

Answer 2

Change your selector to

$("ul.thumb li").hover(function () {

This should sort it out