Question

当将鼠标悬停在单个Div上时，如何修改页面上其他div的大小？

我试图弄清楚如何做的最终结果将在下面粗略描述。

假设我有一页包含内容的div，例如

▀ ▀ ▀ ▀

▀ ▀ ▀ ▀

▀ ▀ ▀ ▀

当你将鼠标悬停在div上时，div会变为：

██▪▪▪

▪▪▪▪

▪▪▪▪

我基本上只是想知道完成此操作的最佳方法是什么，如果有人可以指出我正确的方向，或者前一个主题。

由于

Answer 1

我在http://jsfiddle.net/bmZKC/创建了一个快速演示。使用jQuery和CSS非常容易。我使用了CSS3过渡，但如果您想要更多兼容性，则可以轻松使用$.animate。

以下是它的症结所在：

$(document).ready(function(){
    $('.box').hover(function(){
        $(this).addClass('active');
        $('.box:not(.active)').addClass('shrink');
    }, function() {
        $(this).removeClass('active');
        $('.box').removeClass('shrink');
    });
});

在小提琴中我只调整宽度。如果你想调整高度并让它们完全融合在一起，我会调查一个名为Masonry的jQuery插件。

Answer 2

我最初的猜测是建议你使用普通的CSS。

假设这个HTML：

<div id="content"><div></div><div></div>....</div>

这个CSS可能适合你：

#content>div {
    display:inline-block;
    width:16px; height:16px;
    background:black;
    vertical-align:middle;
}
#content {width:64px}
#content:hover>div {width:8px;height:8px}
#content>div:hover {width:24px;height:24px}

Answer 3

一些jQuery应该很快。

给定HTML：

<div id="content">
    <div></div>
    <div></div>
    [ ... ]
</div>

和CSS

#content div{
    width:100px;
    height:100px;
    display:inline-block;
    background:#444;
    margin:10px 12px;
}
#content .small{
    width:70px;
    height:70px;
    margin:25px 27px;
}

使用这个小小的jQuery：

$("#content div").hover(function(){
    $(this).siblings().addClass("small");
    $(this).removeClass("small");
     /* This can easily be straight JavaScript if your prefer */
});

得到这个：http://jsfiddle.net/daCrosby/2KrmD/

在悬停时调整兄弟div的大小

3 个答案: