CODEWITHSUNDEEP
htmlcsshoverpadding
Josefina
Josefina

Reputation: 23

Padding a navbar element affects all the navbar

I'm trying to make that one div in a navbar gets a top-padding when I hover it. My problem is that all my divs makes the same effect (they all go down), and I just want one of them to make this (the one I'm hovering), and I want the others to stay in the same place, with the same height, without any changes.

The current situation is this one: http://jsfiddle.net/3S8ZB/1/

This is my current CSS:

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
}

div:hover{
    padding-top:2em;
}

What do you suggest?

Upvotes: 2

Views: 35

Answers (3)

Xaviju
Xaviju

Reputation: 250

Not sure if understood becuse it looks like you are very close to that. Padding on the hovered item and keeping the siblings vertically aligned to the top.

http://jsfiddle.net/2UvSa/

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top;
    transition: padding .5s ease-in;
}

div:hover{
    **padding-top:2em;**
}

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11496

Demo

inline-block elements are vertically bottom alligned by default. Add vertical-align: top;

css

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top; /* add this */
}
div:hover {
    padding-top:2em;
}

Upvotes: 2

speak
speak

Reputation: 5382

Put vertical-align: top; on div.

JSFiddle Demo

Upvotes: 0

Related Questions