悬停时更改垂直列表的顶部和底部

问题描述：

我决定选择一个垂直下拉列表中的效果。基本上，每个列表元素由1px灰色条分隔。这个效果很简单，应用底部边框：固体1px黑色;悬停时更改垂直列表的顶部和底部

悬停时，我希望所选项目的顶部和底部边框变为白色。不幸的是，在列表项元素上设置顶部和底部边框不会更改上面的列表项的底部边框，并且最终顶部边框保持黑色，底部边框变为白色。

有没有一种方法来实现这种效果的CSS？

所需的效果如下所示：
menu

答

这将是一个完美的使用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

我不知道下一个兄弟选择器可以这样使用。谢谢！ – SharpBarb

答

显然有在看一个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

这无法正常工作。错误的边框对改变颜色。 http://jsfiddle.net/mattball/hh5x9/ -1 –

悬停时更改垂直列表的顶部和底部

相关推荐