UnluckySerivelha
@UnluckySerivelha

Активация hover при наведении на любую часть png-картинки?

Изображение в формате png, часть изображения прозрачная. Пытаюсь заменить изображение логотипа на такое же другого цвета при наведении на него. При наведении на прозрачную часть hover не срабатывает. Как можно решить?
https://codepen.io/anon/pen/EQdJjG
  • Вопрос задан
  • 67 просмотров
Решения вопроса 2
@MrGaunt
1. Зачем вы говнокодите, размещая два логотипа рядом для hover-эффекта, когда можно сделать так:

.intro__logo:hover {
  background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
}

вместо этого (и лишнего логотипа в DOM):
.intro__logo:hover {
  display: none;
}
.intro__logo:hover ~ .intro__logo--blue {
  display: block;
}
.intro__logo--blue {
  width: 62px;
  height: 57px;
  background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
  display: block;
  float: left;
  display: none;
}


2. Зачем для :hover лишняя картинка, когда можно сделать с прозрачностью?
.intro__logo:hover {
opacity: .9;
}


Выучите азы CSS — вы пишите много лишнего.
Ответ написан
Malekith
@Malekith
Срабатывать при наведении на контейнер? (который за неимением следует сделать)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Soft Media Int. Пенза
от 125 000 до 225 000 руб.
от 120 000 до 150 000 руб.
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект