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.

Lightness Races in Orbit · Accepted Answer · 2011-05-12 13:05:40Z

3

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)

answered May 12, 2011 at 13:05

Lightness Races in Orbit

387k77 gold badges671 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil · Accepted Answer · 2011-05-12 13:04:15Z

3

Change your selector to

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

This should sort it out

answered May 12, 2011 at 13:04

Nikhil

3,3842 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery code not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related