CODEWITHSUNDEEP
htmlcss
CSS Apprentice
CSS Apprentice

Reputation: 939

Hot To Make li:hover Not Move Siblings

I'm trying to enlarge my list-item borders when hovered, but when I do, it shifts the other icons down.

My thought was to use position: absolute on the parent and position: relative on the li or image, but the other list-items/images are still being affected.

jsFiddle: http://jsfiddle.net/2e07Lv9y/2/

HTML:

<div class="container">
    <ul class="social">
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
        <li><img src="http://placehold.it/36x36"/></li>
    </ul>
</div>

CSS:

.container {
    background-color: rgb(54, 129, 245);
    height: 75px;
}

.social {
    width: 50%;
    margin: 3%;
    position: absolute;
    right: 0;
}

li {
    list-style: none;
    display: inline-block;
    margin: 0 1%;
}

img {
    border: 2px white solid;
}

li:hover {
    cursor: pointer;
    border: 5px white solid;
    position: relative;
}

What am I missing?

Upvotes: 1

Views: 314

Answers (4)

Mario A
Mario A

Reputation: 3363

You could use outline instead of border. Outlinke behaves similar to border, but it is not part of the elements dimensions. see: http://www.w3schools.com/css/css_outline.asp

li:hover {
    cursor: pointer;
    outline: 5px white solid;
    position: relative;
}

Fiddle: http://jsfiddle.net/2e07Lv9y/7/

Upvotes: 4

Gjert
Gjert

Reputation: 1067

Add

padding: 5px;

to the normal li and

padding: 0px;

to the li:hover

Upvotes: 1

khusnetdinov
khusnetdinov

Reputation: 430

Problem is that on :hover li that display inline block, have more width including border. if you won't shifts down you need change .social width to more than 50% or place elements via text-align: right.

Upvotes: 1

blurfus
blurfus

Reputation: 14031

You are adding a border 5px wide when you hover.

You need to add a border 5px wide when not hover so that they are only changing the background colour. Something along the lines of:

li {
    list-style: none;
    display: inline-block;
    margin: 0 1%;
    border:5px solid  rgb(54, 129, 245);
}

Updated DEMO

You may need to adjust the height, position, of the li

Upvotes: 1

Related Questions