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

【问题标题】：Change Top And Bottom Border of a Vertical List on Hover在悬停时更改垂直列表的顶部和底部边框
【发布时间】：2011-12-02 16:20:58
【问题描述】：

我决定了一个垂直下拉列表想要的效果。基本上，每个列表元素都由一个 1px 的灰色条分隔。这个效果很简单，应用bottom-border:solid 1px black;

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

有没有一种css唯一的方法来实现这个效果？

这里显示了想要的效果：

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案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很难

【讨论】：

这不能正常工作。错误的一对边框会改变颜色。 jsfiddle.net/mattball/hh5x9 -1