悬停影响类中的所有元素，如何使它只影响我悬停的元素？

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

您的外部容器高度为 30 像素，而您的按钮为 40 像素，但底部边距为负数。

当悬停在其中一个按钮上时，它会失去其上边距，从而将外部容器高度拉伸到 +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 都在向外窥视的现象。