Javascript 悬停时调整同级div的大小

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

我试图弄清楚如何做的最终结果如下所述

假设我有一个div页面，里面有如下内容

▀ ▀ ▀ ▀

▀ ▀ ▀ ▀

▀ ▀ ▀ ▀

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

██▪▪▪

▪▪▪▪

▪▪▪▪

我基本上只是想知道什么是最好的方法来完成这一点，如果有人可以指出我在正确的方向，或到以前的线程

---

谢谢

我最初的猜测是建议您使用纯CSS

假设此HTML：

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

---

使用jQuery应该很快

给定HTML：

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

使用jQuery的这一小部分：

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

请看：

我在上创建了一个快速演示。使用jQuery和CSS非常容易。我使用了CSS3转换，但是您可以很容易地使用

$。如果您想要更多的兼容性，可以使用动画

关键是：

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

在小提琴中，我只调整宽度。如果您想调整高度并使它们很好地结合在一起，我会研究一个名为jQuery的插件。
我不是JavaScript专家，但我怀疑您的问题与Java无关，而与JavaScript有关。如果我是对的，请将您的标记从Java更改为JavaScript。否则你会把更多像我这样的人弄糊涂！您可能可以将jQuery的
hover（）
与
animate（）
结合起来，或者简单地在hover上分配/取消分配各种CSS类。当您将鼠标悬停在一个Div上时，您可以修改页面上其他Div的大小。我看到的是，所有
Div
的值都是100x100，但当您将鼠标悬停在一个Div上时，其他的都变成了，比如说，10x10？这就是你想要的吗？或者，你的意思是所有的都是10x10，而悬停的那个变成了100x100？谢谢你的建议。我将考虑使用jQuery的可能性。这应该是一个很好的练习。谢谢爸爸，这是我想要做的一个很好的表现。然而，你能建议一种方法来“重新安排”突出显示对象周围的其他Div块吗？非常好，谢谢你的即兴回复！这和DA的回应正是我想要实现的。谢谢
$(document).ready(function(){
    $('.box').hover(function(){
        $(this).addClass('active');
        $('.box:not(.active)').addClass('shrink');
    }, function() {
        $(this).removeClass('active');
        $('.box').removeClass('shrink');
    });
});