Question

我有以下CSS用于为导航栏中的少数链接创建简单的悬停效果：

#k9nav-inner ul li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

它可以工作，但是底部的边框是将导航条的整个底部推到那些2px（换句话说，导航栏的高度在悬停期间增加了2px），当鼠标移动时会产生明显的弹出效果链接的过/关。我看到盒子模型会发生什么情况，但是有没有办法可以抵消它，所以2px边框会出现，但是不会用相同的2px拉伸导航栏？

Answer 1

想出来：

#k9nav-inner ul li:hover a {
    box-shadow: 0 -2px red inset;
}

Answer 2

这将阻止发生这种情况

#k9nav-inner ul li:hover {
    box-shadow: 0 0 0 2px red inset;
}

它不是正式的边框，但它看起来完全像一个，并且不会搞砸盒型尺寸

编辑：

仅限底部边框，这将起作用

#k9nav-inner ul li:hover {
    box-shadow: 0 2px red;
}

示例小提琴http://jsfiddle.net/qVD8K/

Answer 3

在某些情况下，利用outline代替border会很有用。大纲不会增加父容器的大小。但是，我不相信可以在一侧设置轮廓（例如轮廓底部）。

outline: 2px solid red;

如果使用容器的边框背景颜色悬停时，如果向列表元素添加2px边框，则在悬停时不会看到2px偏移。

#k9nav-inner ul li {
    border-bottom: 2px solid white;
}

Answer 4

您可以将透明边框设置为#k9nav-inner ul li或（在我看来更好）设置父背景颜色。

例如：

HTML：

<div class="sadf sd1">Some text here</div>
<div class="sadf sd2">Some text here</div>
<div class="sadf sd3">Some text here</div>
<div class="sadf sd4">Some text here</div>

CSS：

.sadf {margin:5px; background:#aaa; height:40px;width:150px;}
.sd1:hover {border-bottom:2px solid #000;}
.sd2 {border-bottom:2px solid transparent;}
.sd2:hover {border-bottom:2px solid #f00;}
.sd3 {border-bottom:2px solid #fff;}
.sd3:hover {border-bottom:2px solid #f00;}

正确的工作示例是.sd2和.sd3。正如你所看到的，它们并不理想，但对我来说效果很好。

参见JSFiddle上的工作示例：http://jsfiddle.net/mZg4N/

Bootstrap 3：带/边界问题的导航栏链接悬停效果

4 个答案: