懸停時更改垂直列表的頂部和底部

我決定選擇一個垂直下拉列表中的效果。基本上，每個列表元素由1px灰色條分隔。這個效果很簡單，應用底部邊框：固體1px黑色;懸停時更改垂直列表的頂部和底部

懸停時，我希望所選項目的頂部和底部邊框變爲白色。不幸的是，在列表項元素上設置頂部和底部邊框不會更改上面的列表項的底部邊框，並且最終頂部邊框保持黑色，底部邊框變爲白色。

有沒有一種方法來實現這種效果的CSS？

所需的效果如下所示：
menu

2011-10-07 SharpBarb

這將是一個完美的使用nonexistent previous-sibling selector的。不幸的是，它根本不存在，我會採取不同的方法。如果你可以改變邊境上頂部，下一兄弟選擇將很好地工作：

ul > li:hover, ul > li:hover + li { 
    border-top: 1px solid white; 
}

演示：http://jsfiddle.net/mattball/ZNR94/

enter image description here

來源

2011-10-07 00:56:23

我不知道下一個兄弟選擇器可以這樣使用。謝謝！ – SharpBarb

-1

顯然有在看一個CSS選擇器元素之前的兄弟姐妹，只爲以下，看看這個例子：

<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
ul { 
    list-style: none; 
    width: 50%; 
    margin: 50px auto; 
} 
li { 
    background: #ccc; 
    border-bottom: 1px solid #000; 
    height; 20px; 
} 
li:hover + li, li:hover { 
    border-bottom: 1px solid #FFF; 
} 
</style> 
<body> 

<ul> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
    <li>&nbsp;</li> 
</ul> 
<p></p> 
</body> 
</html>

所以它很難只用CSS

來源

2011-10-07 01:14:14 rkmax

這無法正常工作。錯誤的邊框對改變顏色。 http://jsfiddle.net/mattball/hh5x9/ -1 –

懸停時更改垂直列表的頂部和底部

回答

相關問題