CSS。刪除懸停並點擊：在

Question

之後我有這個導航欄！

nav { 
 
    // border: 1px solid black; 
 
    text-align: center; 
 
} 
 
li { 
 
    list-style: outside none none; 
 
    // list-style: none; 
 
    position: relative; 
 
    // padding: 10px; 
 
    // padding-left: 0; 
 
    margin: 15px; 
 
    margin-top: 20px; 
 
    display: inline-block; 
 
    // border: 1px solid black; 
 
    // cursor:pointer; 
 
    cursor: pointer; 
 
    // progress: !important; 
 

 
} 
 
nav li:not(:last-child):after { 
 
    content: '|'; 
 
    position: absolute; 
 
    // display: inline-block; 
 
    top: -1px; 
 
    right: -18px; 
 
    cursor: default; 
 
} 
 
li:hover { 
 
    border-bottom: 2px solid rgb(153, 153, 153); 
 
}

<nav> 
 
    <ul> 
 
    <li class='li'>Chisinau, MD</li> 
 
    <li class='li'>Russia, RU</li> 
 
    <li class='li'>London, UK</li> 
 
    </ul> 
 
</nav>

如何刪除懸停和點擊 :after說， 「垂直斜槓」 的功能？

Fiddle

Answer 1

加入這個刪除指針的事件：

nav li:not(:last-child):after { 
    pointer-events: none; 
} 

Answer 2

::後是李的一部分，所以當你懸停::層後，其觸發裏的懸停。所以你可以用span來包裝li的內容，並且當你將鼠標停留在span而不是li時，將鼠標懸停改爲觸發。

像這樣。

<li class='li'><span>Chisinau, MD</span></li> 
<li class='li'><span>Russia, RU</span></li> 
<li class='li'><span>London, UK</span></li> 

和CSS

li span:hover { 
    border-bottom: 2px solid rgb(153, 153, 153); 
} 

要刪除光標上的變化|添加

ul { 
    cursor: default; 
} 

https://jsfiddle.net/tdus7m3a/