Здравствуйте. Как можно реализовать сценарий, когда наводя курсор на кнопку у картинки сверху появлялся background определенного цвета?

Question

[Sake28]

Как на рисунке.
Заранее благодарю !

Comments

[Ankhena]

htmlbook.ru/samcss/kontekstnye-selektory и дальше по оглавлению.
За наведение отвечает псевдокласс :hover

Answer 1

[slavkapiyavka]

Используйте псевдоэлемент у блока с изображением и картинкой и при наведении (hover) на этот блок стилизуйте псевдоэлемент как вам необходимо, в том числе укажите для него background, размеры и прочее.

Если же вам нужно чтобы background появлялся только при наведении на кнопку, то можете попробовать поменять порядок кнопки и картинки в разметке, а при помощи css развернуть их обратно чтобы остался прежний порядок - картинка, кнопка. И далее можно использовать комбинацию селекторов

.image:hover + .button::before {
    content: "";
    background-color: tomato;
}

Почему нужно использовать в селекторе + ? Потому что этот селектор выбирает следующий элемент с указанным селектором в разметке, а в css можно обратиться к следующим соседям которые лежат в разметке после элемента, но не перед. Таким образом в разметке, визуально и в стилях у нас всё будет так, как нам нужно.

Comments

[Sake28]

Ух ты))) Спасибо за развернутый ответ

[slavkapiyavka]

Sake28, можно ещё вот что попробовать - так как у вас кнопка с градиентом, то при наведении на неё просто меняйте градиент. Этот способ подойдёт в том случае, если не нужна анимация.

Весьма расплывчатая формулировка вопроса, поэтому старался дать как можно более развёрнутый ответ.

Answer 2

[Sake28]

почти получилось через селектор ~ тильда. Почти потому что пришлось картинку и кнопку местами поменять в разметке. А как развернуть их обратно в css не знаю))