Question

<nav>
  <ul>
    <li class="span4">
       <a href="/">
          <span class="inner">Nav 1</span>
        </a>
    </li>

我在每个导航元素的侧面都有管道，但它们没有延伸到导航的整个高度（只有文本）。

在侧翻时，管道仍可在侧面看到。这很难解释，但我有一个小提琴：

Fiddle

我的问题是，什么是最好的方法，以便在翻转时隐藏用户的管道？

Answer 1

您可以将此添加到您的CSS，如果这是您需要的，它会在您悬停一个元素时隐藏所有管道：

ul:hover .inner {
  border-right: 2px solid transparent;   
}

请参阅小提琴：http://jsfiddle.net/v27DS/30/

此外，如果您想隐藏仅悬停元素的管道，请尝试：

.inner:hover {
  border-right: 2px solid transparent;   
}

请参阅小提琴：http://jsfiddle.net/v27DS/31/

Answer 2

尝试使用兄弟组合器访问上一个或下一个元素并使其边框透明。

阅读本文：http://css-tricks.com/child-and-sibling-selectors/

Answer 3

你可以这样做：

nav > ul > li:hover ~ li > a > span  {
  border-left: none;
  border-right: 2px solid black;
}

.inner {
  border-left: 2px solid black;
}

nav > ul > li:first-of-type > a > span {
   border-left: none;
}

nav > ul > li:last-of-type > a > span{
  border-right: 2px solid black;
}

Fiddle

翻滚处理边框的最佳方法是什么？

3 个答案: