我决定要垂直下拉列表的效果。基本上,每个列表元素都由一个1px的灰色条分隔。这种效果很容易,应用底边框:实心1px黑色;
悬停时,我希望所选项目的顶部和底部边框变为白色。不幸的是,在列表项元素上设置顶部和底部边界不会改变其上方列表项的底部边界,最终导致顶部边界保持黑色,而底部边界变为白色。
是否只有CSS才能达到此效果?
所需的效果如下所示:
最佳答案
这将是nonexistent previous-sibling selector的完美用法。不幸的是,它根本不存在,我会采用另一种方法。如果您可以将边框更改为顶部,则下一个同级选择器将完美运行:
ul > li:hover, ul > li:hover + li {
border-top: 1px solid white;
}
演示:http://jsfiddle.net/mattball/ZNR94/
关于html - 更改悬停时垂直列表的顶部和底部边框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7682049/