Question

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

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

这是我迄今为止所做工作的一个例子：

的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，因为这个也会移动。

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

提前致谢。

Answer 1

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

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);
    });
});

在鼠标悬停时展开/折叠浮动的div而不会掉到下一行

1 个答案: