jquery设置悬停动画_Jquery - Fatal编程技术网

jquery设置悬停动画

jquery

jquery设置悬停动画,jquery,Jquery,我在这里遵循了这个例子这起作用了。我所做的也是把它放大，并添加了背景图像。调整CSS以将悬停动画移动到背景图像中的特定点。这一切都很有效，但当您将鼠标悬停在背景图像上的任何位置时，都会产生动画效果。我希望它仅在您将鼠标悬停在动画图像上时悬停，或者我可以设置“喜欢的边距”吗 JS: CSS: HTML: 我认为使用“ul.hover\u block li”的选择器指的是将鼠标悬停在列表元素上，而不是图像。如果您将选择器更改为引用img而不是li的内容，则它应该可以工作看看这个：j

我在这里遵循了这个例子

这起作用了。我所做的也是把它放大，并添加了背景图像。调整CSS以将悬停动画移动到背景图像中的特定点。这一切都很有效，但当您将鼠标悬停在背景图像上的任何位置时，都会产生动画效果。我希望它仅在您将鼠标悬停在动画图像上时悬停，或者我可以设置“喜欢的边距”吗

JS:

CSS:

HTML:

我认为使用“ul.hover\u block li”的选择器指的是将鼠标悬停在列表元素上，而不是图像。如果您将选择器更改为引用img而不是li的内容，则它应该可以工作

看看这个：jsfiddle.net/edddotcom/eYp99/

您可以使用图像映射（我不推荐），或者创建一个较小的元素来附加悬停函数。

$(function () {
    $('ul.hover_block li').hover(function () {
        $(this).find('img').animate({
            top: '374px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).find('img').animate({
            top: '0px'
        }, {
            queue: false,
            duration: 500
        });
    });
    $('ul.hover_block2 li').hover(function () {
        $(this).find('img').animate({
            left: '178px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).find('img').animate({
            left: '0px'
        }, {
            queue: false,
            duration: 500
        });
    });
});

body {
    background: #666
}

ul.hover_block {
    display: block;
    overflow: hidden;
    height: 1%;
    padding-bottom: 15px;
}

ul.hover_block li, ul.hover_block2 li {
    list-style: none;
    float: left;
    background: #fff;
    padding: 10px;
    padding-left: 315px;
    padding-top: 78px;
    width: 500px;
    position: relative;
    margin-right: 20px;
    background-image: url('images/2.png');
    background-repeat: no-repeat;
}

ul.hover_block li a, ul.hover_block2 li a {
    display: block;
    position: relative;
    overflow: hidden;
    height: 400px;
    width: 500px;
    padding: 16px;
    color: #000;
    font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}

ul.hover_block li a, ul.hover_block2 li a {
    text-decoration: none
}

ul.hover_block li img, ul.hover_block2 li img {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

<body>
    <ul class="hover_block">
        <li>
            <a href=""><img src="images/3.png" alt="" /> </a>
        </li>
    </ul>
</body>