Question

我有多个图像堆叠在一起。在每张图片hover上，我将图片向左移动以显示整个图像我的问题是我发生了hover次冲突，因为多个图片上有hover，因此有时会触发多个hover，或者在图像再次返回其第一个状态之前hover这样的触发器和错误。
我可以以某种方式管理它以便顺利运行，而不是在当前工作时触发另一个hover（在我的情况下，当图像恢复到原始状态时）？

我的HTML：

<div class="deck-container">
    <ul>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
    </ul>
</div>

以下是我的jsfiddle以及整个示例。

Answer 1

我知道这对你来说可能不是正确的答案，但对我来说，它并没有让人感觉到，卡片是如何滑出来的，因为当卡片向左左侧移动时你会松开鼠标。

此外，您使用jQuery混合了css过渡，这会导致错误的动画。

所以我举了一个关于如何做效果的例子，这可能会更好。或者你可以尝试以你喜欢的方式改变它......

这里的小提琴：http://jsfiddle.net/tmukxs2o/

var $holder = $('div.deck-container');
var $cards = $('div.deck-container li');

$holder.on("mouseleave", resetAll);
$cards.on("mouseenter", function(e){
    var $this = $(this);  
    resetOther($this);
    $this.stop().animate({'margin-right': 78});
});

function resetOther(card){
    $cards.not(card).each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}
function resetAll(){
    $cards.each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}

悬停与堆叠图像冲突

1 个答案: