Как добавить эффект наведения к гиперссылкам? - PullRequest
Новая
       29

Как добавить эффект наведения к гиперссылкам?

0 голосов
/ 23 февраля 2020

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

мой код: 

<div class="icons">
  <a href="ex.fb link here">     <img class="fb"     src="images/fb.png"> </a>
  <a href="insta">               <img class="insta"  src="images/insta.png"> </a>
  <a href="//wa.me/number">      <img class="whatsapp" src="images/whatsapp.png"> </a>
  <a href="youtube.com/channel"> <img class="yt"     src="images/yt.png"> </a>
</div>

Я хочу установить эффект наведения на эти изображения в гиперссылке, чтобы при наведении курсора , img уменьшит некоторую непрозрачность на (непрозрачность: 0,5%;). Как выполнить sh эту задачу?

Следующий код работал на веб-странице localhost: 

.icons a:hover img{
  opacity: .2;
  transition: all .75s;
  -webkit-transition: all .75s;
}

Но этот код не работает на действующей веб-странице :( (У меня такой же индекс. html как для локальной, так и для живой веб-страницы, этот код работает только на локальной странице.)

1 Ответ

0 голосов
/ 23 февраля 2020

пользователь :hover CSS псевдокласс 

a {
  width: 150px;
  display: inline-block;
}

img {
  width: 100%;
}


/* Selects any <a> element when "hovered" */

.icons a:hover img {
  opacity: .5
}
<div class="icons">
  <a href="ex.fb link here"> <img class="fb" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high"> </a>
  <a href="insta"> <img class="insta" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high"> </a>
  <a href="//wa.me/number"> <img class="whatsapp" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high"> </a>
  <a href="youtube.com/channel"> <img class="yt" src="https://i.imgur.com/9r1qCDq_d.jpg?maxwidth=800&shape=thumb&fidelity=high"> </a>
</div>
...