Question

我正在使用weebly来托管网站 - 在我的页面上，我有几张图片。有些图像是链接的，有些则不是。当你将鼠标悬停在它们上面时，我希望链接的图像具有不透明度，我通过以下方式实现了这一点：

.wsite-page-about .wsite-multicol-col img:hover{
opacity: 0.70;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

但这会使所有图像在悬停时获得不透明度。如何才能使这个仅在链接图像时适用？

Answer 1

在CSS的正面添加a，以选择<a>的子图片。类似的东西：

＆＃13;

.wsite-page-about .wsite-multicol-col a img:hover {
  opacity: 0.70;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
img {
  width: 100px;
}

＆＃13;

<div class="wsite-page-about">
  <div class="wsite-multicol-col">
    <a href="#hovered"><img src="http://www.hover.com/assets/home/og_hover-ecd9c237693419342687076277876b71ed0868105bbe3bc321ec844af7bbd38d.png"/></a>
    <br />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/A_LAKE_A_LANE_A_LINE_A_LONE_-_bpNichol.jpg/800px-A_LAKE_A_LANE_A_LINE_A_LONE_-_bpNichol.jpg">
  </div>
</div>

＆＃13;

Answer 2

如果您的图片看起来像这样，（即）在标签内部，那么在悬停时应用的不透明度应该有效。

HTML

   <a href = "#"><img src = "img.jpg" /></a>

CSS

a > img:hover{
opacity:0.70;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-ms-transition: 0.6s ease;
-o-transition: 0.6s ease;
}

仅在链接图像时在悬停时应用不透明度

2 个答案: