悬停会影响类中的所有元素，如何使其仅影响我悬停的元素？

Question

我有一个菜单栏，里面有各种各样的按钮，当我把鼠标悬停在它们上面时，它们会稍微下拉，然后改变颜色。

改变颜色效果很好，但是当我将鼠标悬停在一个按钮上时，所有的按钮都会下拉(而不仅仅是我悬停在一个按钮上)。

HTML:

<div id="menu">
    <div id="Button1" class="menuButton"></div>
    <div id="Button2" class="menuButton"></div>
    <div id="Button3" class="menuButton"></div>
</div>

CSS:

#menu {
    display: block;
    float: right;
    position: absolute;
    top:0;
    left:0;
    height: 30px;
}
.menuButton {
    width: 36px;
    height :40px;
    position: relative;
    display: inline-block;
    margin-top: -10px;
    background-color: rgba(200,50,50,0.25);
    transition: margin-top .3s, background-color .3s;
}
.menuButton:hover {
    margin-top: 0;
    background-color: rgba(100,100,255,0.6);
}

有没有人能弄清楚为什么会发生这种情况(我能做些什么来让它只有元素我悬停下来)?

JSFiddle: http://jsfiddle.net/howkx1nv/

Answer 1

你的外部容器的高度是30px，而你的按钮是40px，但有一个负的底部边界。

当鼠标悬停在其中一个按钮上时，它会失去其上边距，从而将外部容器的高度拉伸到+10px，这导致所有其他按钮填充整个40px。

话虽这么说，代码中的罪魁祸首似乎是内联块的使用，因为块之间的行为是相互关联的。如果您简单地将display: inline-block更改为float: left，您将看到正确的行为

Answer 2

我已经更新了你的jsFiddle来完成你想要的:http://jsfiddle.net/howkx1nv/1/

.menuButton {
    width: 36px;
    height :40px;
    position: relative;
    display: inline-block;
    margin-top: -10px;
    background-color: rgba(200,50,50,0.25);
    transition: top .3s, background-color .3s;
}
.menuButton:hover {
    position:relative;
    top:10px;
    background-color: rgba(100,100,255,0.6);
}

SquareCat解释了为什么所有的div都在一起偷窥。