Question

我有几张图片，当我将鼠标悬停在其中一张图片上时，我希望所有图片都能改变位置。当图像改变位置时，也应该有一个动画，以便它们滑动到新的位置。我正在使用jQuery。我一直在尝试不同的解决方案，但没有任何作用，所以我不发布任何JavaScript。

HTML：

<div class="container">
    <div class="picture one"></div>
    <div class="picture two"></div>
    <div class="picture three"></div>
</div>

CSS

.container {
    position: relative;
}

.picture {
    width: 100px;
    height: 150px;
    background-color: green;
    border: 1px solid #ccc;
    position: absolute;
}

.two {
    left: 60px;
    top: 10px;
    z-index: 2;
}

.three {
    left: 35px;
    top: 50px;
    z-index: 1;
}

.three:hover {
    top: 0;
    left: 100px;
}

.two:hover {
    left: 0;
    top:0;
}

.one:hover {
    left: 200px;
}

链接到jFiddle：http://jsfiddle.net/LJ9wL/2/

Answer 1

这将为您提供一个开始。 http://jsfiddle.net/LJ9wL/3/

$('.picture').on('mouseenter', function() {
    $('.picture').css({top: '0', left: '200px'});
    $(this).css({top: '60px', left: '20px'});
});

$('.picture').on('mouseleave', function() {
    $('.picture').css({top: '0', left: '200px'});
    $(this).css({top: '0', left: '200px'});
});

当其中一个悬停时，更改几个图像位置

1 个答案: