Question

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

我的代码是：

<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％；）。如何完成这项任务？

以下代码在localhost网页上起作用：

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

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

1 个答案: