Question

由于我的上一个问题被标记为重复，但没有重复，而且没有人将其更改回来，我只会再次提出问题。

我有一个<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;
}

Answer 1

将pointer-events: none添加到a元素，然后将悬停应用于父元素，并在其中明确定位a：

＆＃13;

span a {
  pointer-events:none;
}

span:hover a {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 2

我不会用锚来开始。用段落标记替换锚点并修改CSS。

CSS：

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

HTML：

<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>

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

2 个答案: