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

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/