CSS. Entfernen Sie den Mauszeiger und klicken Sie auf: nach

Question

Ich habe diese Navigationsleiste!

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>

Wie die Schwebe- und klicken Funktion dieses "vertical-slash" auf entfernen :after?

Fiddle

Answer 1

entfernen Zeiger-Ereignisse durch das Hinzufügen von:

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

Answer 2

:: nach ist ein Teil eines li, also wenn Sie schweben auf :: nach Schicht wird li schweben auszulösen. Sie können also den Inhalt von li einfach mit span umbrechen und den Hover ändern, der ausgelöst wird, wenn Sie den Mauszeiger über span not li halten.

So.

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

und CSS

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

Zum Ändern der Cursor entfernen auf |

ul { 
    cursor: default; 
} 

https://jsfiddle.net/tdus7m3a/