1

我的网站中有一个水平菜单，其中的项目没有边框。但我希望它在鼠标悬停时有 1px 边框，所以当我在它上面移动鼠标时，这个新创建的边框会将其他元素向左移动，大约 2px（因为border-right= border-left= 1px）。

这是我的代码

<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>

这是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;
    }

这是演示

4

3 回答 3

4

您可以像这样简单地在正常状态上放置一个透明边框：http: //jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li {
    border : 1px solid rgba(0, 0, 0, 0);
}
于 2013-10-08T15:13:39.840 回答
2

您可以为默认的 LI 状态添加“透明”边框：

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

演示：http: //jsfiddle.net/Pn8uw/2/

于 2013-10-08T15:13:41.753 回答
1

您可以简单地减少悬停时的填充。添加以下属性而不是填充：4px;

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

小提琴

于 2013-10-08T15:17:02.447 回答