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

:: 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。删除悬停并单击：之后

2 个答案: