Question

这是我的jQuery代码

$("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);
        });

这是我的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;
        }

这是我的标记

<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>

图像应该放大在鼠标上，但没有发生任何事情！帮助赞赏。

Answer 1

将选择器更改为

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

这应该排除

Answer 2

这是ul.thumb。

ul .thumb选择ul级thumb的任何后代。您想要使用ul类选择thumb。

Example of it working (sort of)

jquery代码不起作用

2 个答案: