CODEWITHSUNDEEP
csshoverborder
M a m a D
M a m a D

Reputation: 2129

how to stop js created borders to effect other elements?

There is a horizontal menu in my website and items inside it have no border. but I want it to have 1px border on mouseover, so when I move the mouse on it, this newly created border moves other elements to the left, about 2px (because border-right = border-left = 1px).

this is my code 

<div id="library_category_wrapper">
    <ul>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item1</a></li>
    </ul>
</div>

and this is css

#library_category_wrapper ul 
    {
        list-style: none;
        float: right;
        position: relative; 
        top:5px;
        margin: auto;
    }

#library_category_wrapper ul li 
    {
        display: inline;
        margin-left:8px;
        padding : 4px;
    }

#library_category_wrapper li:hover
    {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border : 1px solid rgba(0, 0, 0, 0.25);
        border-radius : 4px 4px 4px 4px;
        box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298);
        padding : 4px;
    }

this is DEMO

Upvotes: 1

Views: 65

Answers (3)

jbarnett
jbarnett

Reputation: 984

You can simply reduce the padding on hover. Add the following property instead of your padding: 4px;

#library_category_wrapper li:hover {
    padding: 3px;
}

fiddle

Upvotes: 1

opznhaarlems
opznhaarlems

Reputation: 357

You could add a 'transparent' border to the default LI state:

#library_category_wrapper ul li {
  border: 1px solid transparent;
}

Demo: http://jsfiddle.net/Pn8uw/2/

Upvotes: 1

Simon Arnold
Simon Arnold

Reputation: 16157

You can simply put a transparent border on the normal state like this: http://jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li {
    border : 1px solid rgba(0, 0, 0, 0);
}

Upvotes: 3

Related Questions