HTML CSS / cursor pointer

Question

Всем привет!

Мне надо сделать, чтоб при наведение на картинку на неё накладывалась прозрачно-тёмная плёнка, на которой будет заголовок и кнопка на которую можно нажать. Проблема следующая: плёнку я накладываю, заголовок есть, а вот cursor: pointer не устанавливается на кнопку, я не знаю как это решить.

Вот мой код: https://liveweave.com/WcO7K3

Курсор должен появиться на белом квадрате, который появляется при наведение мышкой на картинку.

Вот фигма как должно быть: https://www.figma.com/file/gBEwh0z9OcWrV6TGs8H2Ij/%D0%BF%D0%BE%D1%82%D1%80%D1%84%D0%BE%D0%BB%D0%B8%D0%BE-%D1%85%D1%83%D0%B4%D0%BE%D0%B6%D0%BD%D0%B8%D0%BA%D0%B0?node-id=27%3A53

Раздел "My portfolio", там есть пример того как должно быть.

Answer 1

Вот решение вашей проблемы на чистом CSS:

.container__pic img:hover + .pic__desc {
  display: block;
}

.pic__desc:hover {
  display: block;
}

Небольшое объяснение:

При наведении курсора на изображение следующий элемент с классом .pic__desc получет пропорцию display: block, далее если курсор был наведён на .pic__desc, то также выдать ему display: block.

При наведении на .pic__info у меня курсор становится указателем, убедитесь что системно обычный курсор у вас отличается от указателя.

БЛОГ НА HUSL

HTML CSS / cursor pointer

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