Question

我决定使用垂直下拉列表的效果。基本上，每个列表元素由1px灰色条分隔。这个效果很简单，应用底部边框：实心1px黑色;

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

是否只有css才能达到这种效果？

此处显示了所需的效果：
menu

Answer 1

这将是nonexistent previous-sibling selector的完美用法。不幸的是，它根本不存在，我会采取不同的方法。如果您可以将边框更改为 top ，则下一个兄弟选择器将完美运行：

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

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

enter image description here

Answer 2

显然看到兄弟姐妹之前的元素的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很难

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

2 个答案: