删除单击功能,但保持悬停完整

Question

由于我的上一个问题被标记为重复,虽然它没有重复,并且没有人将其更改回来,我将再次提出我的问题.

我有一个<a>,默认情况下有一个点击功能.这<a>也有一个悬停,我想保留.

如何禁用点击功能,但保持悬停？

Ps,我很想看到CSS解决方案!

重要!上次,我的问题被标记为此问题的副本:如何仅使用CSS禁用链接？,但pointer-events:none;也阻止了悬停.

如果它仍然是重复的,请将其标记为真正重复的问题的副本.

---

编辑:我忘了提一下,我的悬停是这样的:https: //jsfiddle.net/7o3dbak7/7/

HTML:

<div class="container">
  <ul>
    <li id="item1"><a href="somelinkthatistherebecauseitis">hoverable object</a></li>
    <li id="item2">text object, here comes alot of text explaining certain features of the website.</li>
  </ul>
</div>

CSS:

.container ul #item2 {
  display: none;
  width: 150px;
  padding: 20px;
  background: red;
  color: white;
  cursor: pointer
}

.container ul #item1 {
  pointer-events: none;
}

.container ul #item1:hover + #item2 {
  display: block;
}

Answer 1

添加pointer-events: none到a元素,然后将悬停应用于父元素,a具体针对该元素:

span a {
  pointer-events:none;
}

span:hover a {
  color: red;
}

<span><a href="#">Hello, world!</a></span>