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都在完全窥视的现象。

悬停会影响课堂上的所有元素，如何使它只影响我正在悬停的元素？

2 个答案: