html - 悬停在元素上时从上一个/下一个元素中删除样式

Question

例子:

http://jsfiddle.net/JUmHG/3

当鼠标悬停在 LI 上时，LI 的顶部/底部边框变为透明(由背景颜色替换)。

但前一个 LI 的底部边界和下一个 LI 的顶部边界也必须是透明的。这可以用 CSS 完成吗？

Answer 1

你不能选择前一个兄弟，但你可以尝试一些技巧来获得想要的效果。

像这样:

demo

在除第一个列表项之外的每个列表项上仅使用 border-top 和 inset box-shadow 以模仿 eclipse 刻顶部边框。

li{
    border-top: 1px solid #999;
    box-shadow: inset 0 1px 0 #fff;
    padding: 10px;
}    
li:first-child{
    border-top: 0;
    box-shadow: none;
} 

然后在悬停当前元素和紧随其后的元素时将其删除。

li:hover, li:hover + li {
    border-color: transparent;
    box-shadow: none;
}

这适用于所有 browsers that support box-shadow (也就是说，除 IE8 和更早版本以及功能较弱的移动浏览器之外的所有内容)。

通过使用给定 top: 0; 的绝对定位伪元素，可以在 IE8 中实现相同的效果；左:0；高度:1px；宽度:100%； background: #fff; (甚至在 IE7 中，通过向列表项添加子元素而不是伪元素)。但是，我认为这是矫枉过正，特别是因为原始方法会优雅地降级。