demo

Question

示例：

http://jsfiddle.net/JUmHG/3

当鼠标悬停在LI上时，LI的上/下边框变为透明（由背景颜色替换）。

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

Answer 1

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

像这样：

demo

仅使用border-top＆amp;每个列表项上都有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以及较旧且功能较差的移动浏览器之外的所有内容）。

通过使用给定top: 0; left: 0; height: 1px; width: 100%; background: #fff;的绝对定位的伪元素，可以在IE8中实现相同的效果（甚至在IE7中，通过将子项添加到列表项而不是伪元素）。但是，我认为它过度，特别是因为原始方法会优雅地降级。

Answer 2

我能做的最好的是下一个，但不是前一个：

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

Answer 3

JQuery的：

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

CSS：

.hide{
   border-color: transparent;
}

DEMO

Answer 4

为了达到上述目的：

为所有<li>元素（第一个元素除外）仅提供border-top。

li{ border-top: 1px solid #fff; padding: 10px;}
要从第一个<li>元素中删除边框，请使用：

li:first-child {border-top: none;}
添加悬停状态CSS，如下所示：

li:hover{ border-color: transparent; background: #ccc; border-radius: 7px; }
在当前<li>元素悬停时删除下一个同级<li>元素的边框：

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

Working demo

将鼠标悬停在元素上时，从prev / next元素中删除样式

4 个答案:

demo