1

Знатоки, подскажите, как сделать, чтобы при наведении курсора на изображение — затемнялось изображение и подчёркивалась ссылка, и наоборот: при наведении на ссылку — она подчеркивалась и затемнялось изображение?

2
  • Уточните, изображение является фоном для элемента внутри которого находится ссылка или нет?
    – DogeDev
    28 сен 2017 в 8:30
  • @DogeDev, о! интересная мысль :)
    – Qwertiy
    28 сен 2017 в 8:48

2 ответа 2

0

http://jsfiddle.net/8h177njo/

div:hover p{
    display: block;
    background: rgba(0,0,0,0.5);
 }  

Как то так, подставишь там еще ссылку и пропишешь ей css

1
  • Перенеси код в сниппет. А вообще, я вопрос совсем по-другому понял...
    – Qwertiy
    28 сен 2017 в 8:22
0

Обращаю внимание, что между всеми тремя >< не должно быть пробелов, иначе можно будет навести мышку на пробел и затенятся оба элемента.

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.