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

Question

I have a menu bar with various buttons that drop down slightly and change color as I hover over them.

Changing color works fine, but when I hover over one button, all the buttons drop down (rather than just the one I'm hovering over).

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);
}

Can anyone figure out why this is happening (and what I can do to make it so ONLY the element I hover over comes down)?

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

Answer 1

Your outer container height is 30px, while your buttons are 40px, but with a negative bottom margin.

When hovering over one of the buttons, it loses its top margin and thus stretches the outer container height to +10px, which causes all your other buttons to fill out the full 40px.

That being said, a culprit in your code seems to be the usage of inline-block, as the blocks will behave in relation to each other. If you simply change display: inline-block to float: left in your original fiddle, you will see the correct behaviour.

Answer 2

I've updated your jsFiddle to accomplish what you wanted: 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 explains the phenomenon of why all the divs are peeking out altogether.