Question

我在彼此相邻的一行上有几个链接，我想在它们之间划分破折号。我选择使用::before伪元素来实现这一点，并且它运行良好。

但是，将鼠标悬停在分隔线上也会触发将鼠标悬停在::before上的元素上。

This is a fiddle showing the issue.如果您将鼠标悬停在破折号上，则下划线会显示在a下方。

在我搜索如何防止这种情况发生时，我遇到了this stackoverflow question。与指针事件属性上的documentation on developer.mozilla.org和caniusethis page一起，我确信这会解决它。但它没有。

我在这里缺少什么？

Answer 1

您需要在css中进行更改

.wrap a::before {
    content: '----';
    padding: 0 15px;
    position: absolute;
    left: -50px;
    pointer-events: none;
}
.wrap a {
   text-decoration: none;
   position: relative;
   margin-left: 50px;
   display: inline-block;
}

Answer 2

您需要position:absolute使用----将其从<a>流程中取出，并position:relative转换为父<a>元素。< / p>

Stack Snippet

＆＃13;

.wrap a {
  text-decoration: none;
  margin: 0 30px;
  position: relative;
}

.wrap p {
  margin: 0;
}

.wrap {
  font-family: sans-serif;
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 20px;
}

.wrap a:nth-of-type(1) {
  margin-left: 50px;
}

.wrap a::before {
  content: '----';
  position: absolute;
  pointer-events: none;
  left: -30px;
  transform: translateX(-50%);
}

.wrap a:hover {
  text-decoration: underline;
}

＆＃13;

<div class="wrap">
  <p>These links do not have the pointer-events: none; property</p>
  <br>
  <a href="#">link text one</a>
  <a href="#">link text two</a>
  <a href="#">link text three</a>
</div>

<div class="wrap">
  <p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
  <br>
  <a href="#" class="pointerevents">link text one</a>
  <a href="#" class="pointerevents">link text two</a>
  <a href="#" class="pointerevents">link text three</a>
</div>

＆＃13;

防止在伪元素上悬停 - 但指针事件：无;不这样做

2 个答案: