0

我正在寻找一些关于如何解决鼠标悬停时扩展 div 时遇到的小问题的想法。

我有一系列宽度百分比的 div 全部向左浮动。当我将光标移到一个 div 上时，它的大小会增长 3 倍，然后将所有 div 向右移动。现在，只有 4 个 div 适合单个行，问题是当将鼠标移到每行的最后两个元素上时，它们将落入下一行，因为它们不再适合当前行。

这是我迄今为止一直在工作的一个例子：

CSS：

    #mosaicWrapper{ width:70%; background:#ccc}
   .mosaic{ width:20%; background:#06C; height:150px; float:left; margin:20px 20px 0 0; color:white; text-align:center; font-size:74px; position:relative; cursor:pointer}

代码：

var wrapper = $('#mosaicWrapper');
var mosaic = $('.mosaic');
var mosaicWidth = mosaic.outerWidth(true);
var elesPerRow= Math.floor(wrapper.width()/mosaicWidth);
var expandedWidth = (mosaicWidth*(elesPerRow-1))-mosaic.margin('right');
var lastItems = [];
var intialWidth = mosaic.width();


for (var i = elesPerRow; i < mosaic.length; i = i + elesPerRow){
    var lItem = i - 1;
    lastItems.push(lItem);
}

mosaic.each(function(index, element) {
    thisItem = $(this);
    thisItem.mouseover(function(e) {                
        $(this).stop(false, false).animate({'width':expandedWidth},500);
        if($.inArray(index, lastItems) > -1){
            var last = index - 1;                   
        };
    });

    thisItem.mouseleave(function(e) {
        $(this).stop(false, false).animate({'width':intialWidth},500);
    });
});

在这里工作的例子：http: //jsfiddle.net/xjm3h/3/

我有一个想法，将前两个 div 剪切并粘贴到当前 div 之后，没有任何运气，因为光标丢失了 div，因为这个也移动了。

有没有人知道如何解决这个问题？

提前致谢。

4

1 回答 1

0

你可以做这样的事情......获取悬停元素的索引，然后为前一个元素的宽度设置动画

mosaic.each(function(index, element) {
    thisItem = $(this);
    thisItem.mouseover(function(e) {
        mosaic.eq($(this).index()-1).stop().animate({'width':0},500);
        $(this).stop().animate({'width':expandedWidth},500);

        if($.inArray(index, lastItems) > -1){
            var last = index - 1;
        }
    });

    thisItem.mouseleave(function(e) {
        mosaic.eq($(this).index()-1).stop().animate({'width':intialWidth},500);
        $(this).stop(false, false).animate({'width':intialWidth},500);
    });
});
于 2013-04-08T23:26:27.873 回答