在懸停時更改邊框寬度

我有一個鏈接列表，我希望鏈接底部或頂部的邊框視覺效果可以在懸停時更改其寬度。我試圖做到這一點，但邊界變化的寬度和文字上下移動。在懸停時更改邊框寬度

我希望文本被固定，邊框寬度在文本後面改變！

<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

在懸停時更改邊框寬度

回答

相關問題