CSS Class Selector hover

Question

I've been trying to make a navigation bar with small images which respond(by margin 10px from the top) when you hover over them. I applied the hover effects via a class Selector, however when I hover over one image the rest of them respond as well. So, can I correct this with the class Selector?

Here's the html side.

<a href=""><img class="menu" src="weight.png" /></a>
<a href=""><img class="menu" src="height.png" /></a>

Here's the css:

.menu{
    height:100px;
    width:100px; 
    transition:all 0.3s ease-in; margin-left:15px; 
    margin-top:5px;
}
.menu:hover{
    margin-top:15px;
    transition:all 0.3 ease-in;
}

Thank you for your help.

James Donnelly · Accepted Answer · 2014-05-29 19:27:44Z

1

The default vertical alignment for inline content is "baseline". This means that your images by default stick to the bottom of your a elements. To fix this, you simply need to set the vertical alignment on your img elements to "top":

.menu {
    ...
    vertical-align: top;
}

JSFiddle demo.

answered May 29, 2014 at 19:27

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bill Hal Over a year ago

I don't quite get why it works, but it works. Thank you very much!

Collectives™ on Stack Overflow

CSS Class Selector hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related