Question

我试图在图像网格上组合2个效果，1当鼠标悬停在框架上时图像在框架内生长并在鼠标离开框架时恢复原点，并且还显示半透明div通过链接到其他地方的图像。

我用于图像缩放的代码在这里：

$(function () {
//the size of the image when hovered over, originally 200/0/0
$('#container img').hover(

function () {
    var $this = $(this);
    $this.stop().animate({
        'opacity': '1.0',
            'height': '500px',
            'top': '-66.5px',
            'left': '-150px'
    },
    //this following number defines speed of animation enlargement ( in ms)
    20);
},

function () {
    //the size of the image when left alone
    var $this = $(this);
    $this.stop().animate({
        'opacity': '0.5',
            'height': '400px',
            'top': '-66.5px',
            'left': '-150px'
    },
    //this following number defines speed of animation back to normal ( in ms)
    700);
});
});

和半透明掩码的代码，实际上是包含链接的隐藏div，在这里：

$('.lbwrap.1').hover(function () {
$('.over').fadeIn();
}, function () {
$('.over').fadeOut();
});

这里的工作演示（请注意，只有顶行的第三个图像具有div）： http://jsfiddle.net/9wumj4nq/

我遇到的问题是，当div出现在图像上方时，鼠标停止悬停，这意味着下面的图像缩小回原始大小。当覆盖div到位时，如何保持底部图像放大？

非常感谢

Answer 1

问题是你在img上绑定事件。不要那样做。将您的活动绑定在容器上，例如div与您的案例中的lbwrap类。

相关的jQuery代码 ：

$('.lbwrap').hover(function () {
    $(this).find('.over').fadeIn();
}, function () {
    $(this).find('.over').fadeOut();
});

和

$('.lbwrap').hover(
    function () {
        var $img = $(this).find("img");
        $img.stop().animate({
            'opacity': '1.0',
                'height': '500px',
                'top': '-66.5px',
                'left': '-150px'
        },
...

演示小提琴：http://jsfiddle.net/abhitalks/9wumj4nq/2/

更好的选择：

根本不要使用jQuery。您可以使用CSS3过渡。 CSS转换比基于javascript的动画更有效。

相关CSS ：

lbwrap a img {
    transform: scale(1);    
    transition: 500ms all;
    opacity: 0.5;
}

div.lbwrap:hover img {
    transform: scale(1.5);
    opacity: 1;
}

div.lbwrap:hover .over {
    display: block;
}

演示小提琴：http://jsfiddle.net/abhitalks/9wumj4nq/1/

如何在隐藏的div上保持鼠标悬停/悬停

1 个答案:

更好的选择：