CSS。ホバーを外して：をクリックしてください

Question

私はこのnav-barを持っています！ホバーを削除し、 :after上の "垂直スラッシュ" の機能をクリックする方法

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>

？

Fiddle

Answer 1

これを追加することにより、ポインタ・イベントを削除します。

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

Answer 2

を::後のLiの一部であるので、あなたは上にカーソルを移動する際::層の後に、それは、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); 
} 

上のカーソルの変更を削除するには|このhttps://jsfiddle.net/LeoLion/sthwvt0s/1/よう

ul { 
    cursor: default; 
} 

https://jsfiddle.net/tdus7m3a/