html - 禁用与指针事件的链接，但保持活动 :hover 事件

Question

我不想使用属性选择器禁用主页中的链接，pointer-events: disable;但我想保持 :hover 效果。

这是CSS：

Section#thumbnails .thumb a[title="Yorokobu"]{
    pointer-events: none !important;
    display: block !important;
    cursor: default;
  }

这个网站：www.rafagarces.com/work

谢谢！

Answer 1

您可以将:hover状态添加到父元素。

section#thumbnails .thumb a[title="Yorokobu"] {
    pointer-events: none !important;
    display: block !important;
    cursor: default;
}

section#thumbnails .thumb:hover a[title="Yorokobu"] {
    color: red;
}

<section id="thumbnails">
  <span class="thumb">
    <a title="Yorokobu">
      Test
    </a>
  </span>
</section>

Answer 2

你的答案在这里：

section#thumbnails .thumb a[title="Yorokobu"]:hover {
    pointer-events: visible !important;
    cursor: auto;
}