你不能选择上一个兄弟,但你可以尝试一些技巧来获得所需的效果。

像这样:

demo

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

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

然后将其卸下 hover 用于当前项目及其后面的项目。

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

这在所有方面都有效 browsers that support box-shadow (也就是说,除了IE8和功能较弱的旧版移动浏览器之外的所有内容)。

在IE8中,通过使用给定的绝对定位的伪元素可以实现相同的效果 top: 0; left: 0; height: 1px; width: 100%; background: #fff; (甚至在IE7中,通过向列表项添加子项而不是伪元素)。然而,我认为这太过分了,尤其是因为最初的方法会优雅地退化。

我能做的最好的事情是下一个,但不是上一个:

http://jsfiddle.net/JUmHG/4/

上面使用CSS + 选择器,用于选择下一个同级。

设置上一个的样式 li, 您可能需要JavaScript。

对于jQuery解决方案,这可能会起作用: http://jsfiddle.net/JUmHG/5/

当CSS4出现时(不要屏住呼吸),你可以这样做(主题选择器):

$li + li:hover,
li:hover,
li:hover + li {
    ...
}

http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

JQuery(查询):

$('li').hover(function(){
  $(this).prev().addClass('hide'); 
},function(){
  $( 'li').removeClass('hide'); 
});

CSS格式:

.hide{
   border-color: transparent;
}

DEMO

为了实现上述目的:

1. 仅为所有 <li> 除了第一个元素。

   li{ border-top: 1px solid #fff; padding: 10px;}

2. 从第一个删除边框 <李> 元素,使用:

   li:first-child {border-top: none;}

3. 添加悬停状态css如下:

   li:hover{ border-color: transparent; background: #ccc; border-radius: 7px; }

4. 删除下一个同级 <李> 当前悬停时元素的边框 <李> 元素:

   li:hover + li { border-top: none; }

Working demo