为何设置a:hover img {opacity:1}无法取消图片hover时的透明度？

我希望在网站中取消图片hover时的opacity（透明度）效果，但保留所有文本hover时的透明度效果。为何设置以下CSS代码无法生效？

a:hover img {
  opacity: 1;
}

当前使用的CSS和HTML代码如下：

CSS代码 #

a:link, a:visited, a:hover {
  text-decoration: underline;
  color: #000;
  transition: opacity .2s ease-in-out;
}
a:hover {
  opacity: 0.5;
}
a:hover img {
  opacity: 1;
}

HTML代码 #

<div class="news-list-item">
  <div class="news-list-image">
    <a href="#"><img src="https://itpresent.com/web/javascript/images/flower.jpg"></a>
  </div>
    <h2><a href="#">Title</a></h2>
</div>

opacity是基于父元素的相对继承属性：当你给父元素<a>设置opacity: 0.5后，所有子元素的透明度都会以这个值为基准计算。哪怕给子元素<img>设置opacity: 1，它实际显示的透明度是父元素的0.5乘以自身的1，最终还是0.5，所以图片看起来依然是半透明的，达不到预期效果。

方案1：仅给文本内容设置hover透明度 #

修改HTML，用<span>包裹文本内容：

<div class="news-list-item">
  <div class="news-list-image">
    <a href="#"><img src="https://itpresent.com/web/javascript/images/flower.jpg"></a>
  </div>
    <h2><a href="#"><span>Title</span></a></h2>
</div>

调整CSS，把hover时的opacity效果只作用在文本的<span>上：

a:link, a:visited, a:hover {
  text-decoration: underline;
  color: #000;
}
a:hover span {
  opacity: 0.5;
  transition: opacity .2s ease-in-out;
}

方案2：区分不同用途的链接 #

给图片所在的<a>添加类名，明确区分文本链接和图片链接：

<div class="news-list-item">
  <div class="news-list-image">
    <a href="#" class="image-link"><img src="https://itpresent.com/web/javascript/images/flower.jpg"></a>
  </div>
    <h2><a href="#" class="text-link">Title</a></h2>
</div>

修改CSS，仅对文本链接设置hover透明度：

a:link, a:visited, a:hover {
  text-decoration: underline;
  color: #000;
  transition: opacity .2s ease-in-out;
}
.text-link:hover {
  opacity: 0.5;
}
.image-link:hover {
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Igor