Question

我有一个链接列表，我希望链接底部或顶部边框的视觉效果可以在悬停时更改其宽度。我尝试这样做，但边框宽度改变，文字上下移动。

我希望修复文本并在文本后面更改边框宽度！

<ul>
    <li>
        <a href="#"><div class="first">first</div></a>
    </li>
    <li>
        <a href="#"><div class="second">second</div></a>
    </li>
</ul> 

ul {
    list-style-type:none;
    background-color:#eee;
    height:30px;
}
ul li {
    display:inline-block;
    margin-right: 5px;
    height:30px;
}
div {
    height:30px;
    line-height:30px;
}
div.first {
    border-bottom-color: #aaa;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    transition: border 1s ease;
}
div.second {
   border-top-color: #aaa;
    border-top-width: 2px;
    border-top-style: solid;
    transition: border 1s ease;
}
div:hover {
    border-width:30px;
}

演示：JSFiddle

Answer 1

好吧我通过向div而不是边框添加高度来修复它，并在悬停时增加高度，这是fiddle上的示例

a div {
    background-color:#333;
    height:2px;
    line-height:30px;
    transition: height 0.3s ease;
}
a div:hover {
    height:30px;
}

谢谢大家的帮助

Answer 2

这是一个愚蠢的行为：

http://jsfiddle.net/ym7tynws/2/

您现在要做的就是使用第二个标签的z-index。

CSS：

    .nav {
    list-style:none;
    width:200px;
}
.nav li {
    margin:0;
    text-align:center;
    width:50%;
    display:block;
    float:left;
    position:relative;
}
.nav li a {
    position:relative;
    display:block;
    padding:0;
    cursor:pointer;
}
a .menu-link {
    background-color:#eee;
    height:30px;
    line-height:30px;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-bottom-color:#333;
    transition: border 0.3s ease;
}
a div:hover {
    border-bottom-width:30px;
}

.second {

    height:30px;
    line-height:30px;
    position: relative;
    background-color:#eee;
    transition: height 0.3s ease;
}

.second:before{
    background: #333;
    height: 2px;
    width: 100%;
    position: absolute;
    content: "";
    display: inline-block;
    left: 0;
}

.second:before {
    top: 0;
}

.second:hover:before {
    transition: height 0.3s ease;
    height:30px;

}

HTML：

<ul class="nav">
<li>
     <a><div class="menu-link">About</div></a>
</li>
<li>
     <a><div class="second">Contact Us</div></a>
</li>

Answer 3

您想要的是不可能的，因为边框本身占据了文档中的空间，它是盒子模型的一部分，因此它的高度被考虑在内。如果您希望高度更改不影响文档的其余部分，则必须从正常文档流中删除该元素。

我建议您在伪元素上使用height创建一个假边框，并将其与父元素完全对齐，如下所示：

.first,
.second {
height:30px;
line-height:30px;
position: relative;
}

.first:after,
.second:before{
background: #aaa;
height: 2px;
width: 100%;
position: absolute;
content: "";
display: inline-block;
left: 0;
}

.first:after {
    top: 100%;
}

.second:before {
    top: 0;
}

.first:hover:after,
.second:hover:before {
    height:30px;
}

以下是您的小提琴的更新：

http://jsfiddle.net/jkaL3a6m/

另一种选择是使用box-shadow属性而不是border来创建一个虚假的“边框”。

悬停时更改边框宽度

3 个答案: