Знатоки, подскажите, как сделать, чтобы при наведении курсора на изображение — затемнялось изображение и подчёркивалась ссылка, и наоборот: при наведении на ссылку — она подчеркивалась и затемнялось изображение?
2 ответа
div:hover p{
display: block;
background: rgba(0,0,0,0.5);
}
Как то так, подставишь там еще ссылку и пропишешь ей css
-
Перенеси код в сниппет. А вообще, я вопрос совсем по-другому понял...– Qwertiy ♦28 сен 2017 в 8:22
Обращаю внимание, что между всеми тремя ><
не должно быть пробелов, иначе можно будет навести мышку на пробел и затенятся оба элемента.
span, a {
display: inline-block;
line-height: 48px;
height: 48px;
}
img {
vertical-align: middle;
}
a {
padding: 0 1em;
}
img:hover + a, span:hover img:not(:hover) {
opacity: .5;
}
<span><!--
No spaces here
--><img src=//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=48&d=identicon&r=PG><!--
No spaces here
--><a href=//ru.stackoverflow.com/users/178988/qwertiy>Qwertiy</a><!--
No spaces here
--></span>