在悬停时更改边框宽度

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

我希望文本被固定，边框宽度在文本后面改变！

<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

来源

2014-10-27 user3003810

'我希望文本被固定，边框宽度改变在文本后面'也许你想改变背景颜色？ – dfsq 2014-10-27 09:47:02

不，我希望它与动画（向下滑动），它可能与jQuery动画完成，但我希望它在CSS中，如果有可能！ – user3003810 2014-10-27 09:49:46

或向上滑动..根据边框位置 – user3003810 2014-10-27 09:50:22

确定我固定它通过增加高度的div而不是边界，并增加悬停高度，这里是例如fiddle

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

谢谢大家的帮助

来源

2014-10-27 11:26:20 user3003810

你可以接受你自己的回答 – 2014-10-27 12:49:18

是的，但两天后，我应该等待明天：）@AdrienBe – user3003810 2014-10-28 08:16:25

你想要什么，因为边界自身在文档中占据的空间是不可能的，它是盒模型的一部分，所以它的高度考虑。如果您希望更改高度以不影响文档的其余部分，则必须从普通文档流中删除该元素。

我建议你使用一个伪元素上高度创建一个假的边框和绝对其定位对父元素，像这样：

.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属性而不是边框来创建假“边框”。

来源

2014-10-27 10:14:33

但我真的使用它，并与底部边界工作正常！这里是我写的例子，但是当我改变它到顶部不起作用http://jsfiddle.net/ym7tynws/1/ – user3003810 2014-10-27 10:32:42

@ user3003810什么？我的小提琴不能回答你的问题吗？ – 2014-11-03 08:57:19

居然没有，即使我添加z-index，我用高度解决了它http://jsfiddle.net/ym7tynws/3/ – user3003810 2014-11-03 09:01:22

这里有一个fiidle：

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>

来源

2014-10-27 10:59:23 azhpo

在悬停时更改边框宽度

回答

相关问题