Как сделать чтобы cursor: pointer появлялся только при наведении на текст, а не на весь блок ссылки?

Question

[tkachenkoaanna097]

Как сделать чтобы cursor: pointer появлялся только при наведении на текст, а не на весь блок ссылки? Возможно ли сделать это без ограничений ширины?

Answer 1

[Moon Presence]

У тега </a> по дефолту стоит cursor: pointer и задавая данному тегу свойство display: block вы позволяете ссылке растягиваться на всю доступную ширину и поэтому cursor: pointer будет висеть на всей ссылке, а не на тексте лежащем внутри ссылки. Собственно говоря можно обвернуть внутри лежащий текст в </span> и задать ему свойство cursor: pointer, а ссылке сбросить cursor: pointer до cursor: default.

<a href="" class="stage__link">
<span class="stage-link__text">Подробнее</span>
</a>

.stage__link {
  display: block;
  text-align: center;
  cursor: default;
}

.stage-link__text {
  cursor: pointer;
}