我的邊框效果在懸停時無法正常工作

我正在用小CSS設計一個簡單的列表。在此設計中，如果用戶將鼠標懸停在列表項上，它將突出顯示頂部和底部邊框。但是，除了最後一個懸停，只有一個邊框突出顯示。我的邊框效果在懸停時無法正常工作

如果我刪除margin-bottom: -1px;那麼它顯示2px邊框。

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 

 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid #eeeeef; 
 
    border-bottom: 1px solid #eeeeef; 
 
    margin-bottom: -1px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-top: 1px solid #0275d8; 
 
    border-bottom: 1px solid #0275d8; 
 
    
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

Fiddle

來源

2016-11-25 Kiran

但是在第一和第二個li之間，你也有一個2px邊框。你想要那個嗎？ – theoretisch

刪除'margin-bottom：-1px;'時，我無法重現您的問題。你使用的是什麼瀏覽器？ – Roberrrt

@theoretisch：沒有。我不想要2px邊框顯示。只顯示1px。 – Kiran

這是因爲下面仍然是.list-item有#eeeeef邊框頂部。解決這個問題的一個簡單方法就是說下一個.list-item也應該有一個邊框頂部變爲#0275d8。

我們是這樣做的：

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 
.list-item { 
 
    padding: 10px 0; 
 
    border: solid #eeeeef; 
 
    border-width: 1px 0; 
 
    margin-bottom: -1px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-color: #0275d8; 
 
} 
 

 
/* next .list-item */ 
 
.list-item:hover + .list-item { 
 
    border-top-color: #0275d8; 
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

希望這有助於。

來源

2016-11-25 10:48:12

是的，它按我想要的方式工作。謝謝！ – Kiran

ahh好，我認爲第一個和第二個li之間的界限也應該是1px。 – theoretisch

@Kiran我現在也對CSS做了一些優化。 –

這會幫助你。它不是一個美麗的解決方案，但它的工作我認爲。

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
} 
 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid grey; 
 
} 
 
.list-item:hover{ 
 
    color: #0275d8; 
 
    border-color: #0275d8; 
 
} 
 
li:hover + li { 
 
    border-top-color: #0275d8; 
 
} 
 
li:last-child{ 
 
    border-bottom: 1px solid grey; 
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

來源

2016-11-25 10:38:51 theoretisch

它的工作，但當你懸停時，仍然在下面顯示灰色底部邊框。 – Kiran

@Kiran我修好了試試吧 – theoretisch

是的，但@安德魯的一個更乾淨。你的'李'風格正在讓我的另一個'李'！ – Kiran

-1

請將此類。改變margin bottom:-1px到0px

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 

 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid #eeeeef; 
 
    border-bottom: 1px solid #eeeeef; 
 
    margin-bottom: 0px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-top: 1px solid #0275d8; 
 
    border-bottom: 1px solid #0275d8; 
 
    
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

來源

2016-11-25 10:41:18

請檢查該 –

https://jsfiddle.net/sonymathew/ojky4zhj/ –

你檢查它顯示的2px邊界正常嗎？ – Kiran

我的邊框效果在懸停時無法正常工作

回答

相關問題