CSS懸停邊框使內聯元素稍微調整我有一個無序的列表或錨點。我有一個CSS：懸停事件，它添加了邊框但左邊的所有錨點稍微調整，當我懸停，因為它是向寬度添加1px并自動調整。我如何確保定位是絕對的？我在這里做了一個JS小提琴。
3 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
您可以使用框陰影而不是邊框來實現此類功能。
這是有效的，因為你的陰影不會“占用DOM中的大小”，因此不會影響定位，不像邊框那樣。
嘗試使用像這樣的聲明
box-shadow:0 0 1px 1px #102447;
而不是你的
border:1px solid #102447;
在你的懸停狀態。
以下是此操作的快速演示：
DEMO
#homeheader a:visited,#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;}#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;}#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;}<div id="homecontainer"> <div id="homeheader"> <ul> <li><a href="#">this</a> </li> <li><a href="#">that</a> </li> <li><a href="#">this again</a> </li> <li><a href="#">that again</a> </li> </ul> </div></div>
- 3 回答
- 0 關注
- 464 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消