Отключить связь с событиями указателя, но оставить активным событие: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;
}