UnluckySerivelha
@UnluckySerivelha

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

Изображение в формате png, часть изображения прозрачная. Пытаюсь заменить изображение логотипа на такое же другого цвета при наведении на него. При наведении на прозрачную часть hover не срабатывает. Как можно решить?
https://codepen.io/anon/pen/EQdJjG
  • Вопрос задан
  • 511 просмотров
Решения вопроса 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
Срабатывать при наведении на контейнер? (который за неимением следует сделать)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы