删除点击功能，但保持悬停不变答案

【问题标题】：Remove click function, but keep hover intact删除点击功能，但保持悬停不变
【发布时间】：2016-10-21 10:35:18
【问题描述】：

由于我的上一个问题被标记为重复，虽然它没有重复，也没有人将其改回，所以我将再次问我的问题。

我有一个<a>，默认情况下，它具有点击功能。这个<a> 也有一个悬停，我想保留它。

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

P.s.，我很想看到 CSS 解决方案！

重要！上次，我的问题被标记为与此问题重复：How to disable a link using only 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;
}

【问题讨论】：

抱歉，由于我误解了您的问题，我投票结束了您之前的问题。将来，与其提出新问题，不如简单地编辑您的问题以阐明您的意图（并解释为什么您认为它不是重复的）。
那么你真的需要在那里使用锚元素吗？无论如何，詹姆斯的回答仍然有效：jsfiddle.net/7o3dbak7/1
所以你想要一个类似工具提示的东西，你可以把#item2 id的文本放在#item1的
标签中，你可以在#item1 id悬停时显示它。你为什么要创建多个
标签。

【解决方案1】：

将pointer-events: none 添加到a 元素，然后将悬停应用到父元素，专门针对其中的a：

span a {
  pointer-events:none;
}

span:hover a {
  color: red;
}

&lt;span&gt;&lt;a href="#"&gt;Hello, world!&lt;/a&gt;&lt;/span&gt;

【讨论】：

好的，可以，但是我的悬停效果有点不同。让我把它添加到我的问题中！
@MaartenWolfsen 而不是将pointer-events: none 应用于您的#item1 元素，而是将其直接应用于a 元素。 .container ul #item1 a { pointer-events: none; }
好吧，老实说，a 标签不在 li 内：p
@MaartenWolfsen 我不太确定你在问什么。您的问题表明您要禁用点击功能，但保留悬停在 <a> 元素上。您给出的标记在<li> 元素中显示了一个<a> 元素。你真正想要发生什么？
@MaartenWolfsen 您在此处的 HTML 无效。 <a> 元素不允许是 <ul> 元素的直接子元素。

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