hover 影响 class 中的所有元素，如何让它只影响我悬停的元素？

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。

话虽如此，您的代码中的罪魁祸首似乎是内联块的使用，因为这些块将相互关联。如果您只是将原始 fiddle 中的 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 都向外窥视的现象。

hover 影响 class 中的所有元素，如何让它只影响我悬停的元素？

hover affects all elements in class, how to make it only affect the one I'm hovering over?

html

css

hover

css-transitions