2

例子：

http://jsfiddle.net/JUmHG/3

当鼠标悬停在 LI 上时，LI 的顶部/底部边框变为透明（由 background-color 代替）。

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

4

4 回答 4

4

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

像这样：

演示

在除第一个列表项之外的每个列表项上仅使用border-top& aninset 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;
}

这适用于所有支持的浏览器box-shadow（即，除了 IE8 和更旧且功能较弱的移动浏览器之外的所有浏览器）。

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

于 2012-09-23T11:57:49.590 回答
3

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

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

于 2012-09-23T11:39:06.487 回答
1

查询：

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

CSS：

.hide{
   border-color: transparent;
}

演示

于 2012-09-23T11:49:07.503 回答
0

为了达到上述目的：

  1. <li>只为除第一个元素之外的所有元素提供border-top 。

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

  2. 要从第一个<li>元素中删除边框，请使用：

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

  3. 添加悬停状态css，如下所示：

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

  4. 在当前元素悬停时移除下一个兄弟<li>元素的边框<li>：

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

工作演示

于 2020-07-14T13:57:42.043 回答