Рамка вокруг карточки при наведении на ссылку

Question

Как через css задать рамку для карточки, но при этом стилизуя ссылку, и вообще возможно ли это? Сделал с помощью before, но при этом, из-за растягивания ссылки, кликабельна становится вся карточка. Можно ли это как-то исправить, чтобы рамка появлялась только при нажатии на ссылку и чтобы потом, задавая смену цвета ссылке при hover, он менялся только при наведении на саму ссылку.

.special-item {
  position: relative;
  width: 100px;
  padding: 40px 40px 40px 40px;
}

.special-item-link {
  color: #f0bf5f;
  transition: color .3s ease-in-out;
}

.special-item-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  outline-offset: 8px;
  outline: 1px solid #cc9933;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.special-item-link:focus::before {
  opacity: 1;
}

.special-item-link:hover {
  color: red;
}

<article class="special-item">
  <h3 class="special-item-title">
    Карточка с текстом
  </h3>
  <a href="#" class="special-item-link">
                Ссылка
              </a>
</article>

Answer 1

чтобы рамка появлялась только при нажатии на ссылку и чтобы потом, задавая смену цвета ссылке при hover, он менялся только при наведении на саму ссылку.

та легко.

.special-item {
  position: relative;
  width: 100px;
  padding: 40px;
  margin: 40px;
  background: lightgray;
}

.special-item-link {
  color: #f0bf5f;
  transition: all .3s ease-in-out;
}

.special-item-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  outline-offset: 8px;
  outline: 5px solid #cc9933;
  opacity: 0;
  transition: all .3s ease-in-out;
  pointer-events: none; /*!!!!! https://webref.ru/css/pointer-events !!!!!*/
}

.special-item-link:focus::before {
  opacity: 1;
}

.special-item-link:hover {
  color: red;
}
.special-item-link:hover:before {
  outline: 5px solid darkred;
}

<article class="special-item">
  <h3 class="special-item-title">
    Карточка с текстом
  </h3>
  <a href="#" class="special-item-link">Ссылка</a>
</article>

если же обходиться только фокусным ивентом, то можно и родителя раскрасить напрямую, с помощью https://webref.ru/css/focus-within

увы, остальные ивенты пробрасывать вверх по иерархии, CSS еще не умеет. впрочем, может что то и упускаю.

БЛОГ НА HUSL

Рамка вокруг карточки при наведении на ссылку

Ответы (1 шт):