如何为超链接图像添加悬停效果？

Question

我用图像（社交媒体图标）创建了社交媒体 hyperlicks，并想为这些图像添加悬停效果，但无法正常工作。我正在尝试为超链接标签中的图像添加悬停效果。

我的代码是：

<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>

我想在 hyerlink 中为这些 img 设置悬停效果，这样当有人悬停时，img 会降低一些不透明度（不透明度：0.5%；）。如何完成这个任务？

以下代码适用于本地主机网页：

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

但是这段代码在实时网页上不起作用:( （我对本地和实时网页都有相同的 index.html，但此代码仅适用于本地主机页面。）

Answer 1

用户 :hover CSS pseudo-class

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>

如何为超链接图像添加悬停效果？

How to add hover effect to hyperlink images?

html

css

hyperlink

hover