處理翻滾邊界的最佳方法是什麼？

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