CSS。移除悬停并点击 :after

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>

如何去掉那个"vertical-slash"的悬停和点击功能 :after?

Fiddle

Answer 1

通过添加以下内容删除指针事件：

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

Answer 2

::after 是 li 的一部分，因此当您将鼠标悬停在 ::after 图层上时，它会触发 li 的悬停。所以你可以只用 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/

CSS。移除悬停并点击 :after

CSS. Remove hover and click on :after

html

css

hover