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/