css - 如何在悬停时更改文本的不透明度？

Question

在 hover 上，我希望图像和文本的不透明度变为 0.5。但它仅适用于图像，不适用于文本:

a:hover {
    opacity: 0.5;
    cursor:pointer;
}

<a>
    <img src="http://agriculture.vic.gov.au/__data/assets/image/0005/182390/rabbit_img1.jpg" style="max-height:90px">
    <footer class="logo-footer">Matthew <cite>Rabbit</cite></footer>
</a>

Answer 1

<a>
    <img src="http://agriculture.vic.gov.au/__data/assets/image/0005/182390/rabbit_img1.jpg" style="max-height:90px">
    <footer class="logo-footer">Matthew <cite>Rabbit</cite></footer>
</a>

body {
  background: red;
}

a:hover {
    opacity: 0.5;
    cursor:pointer;
}

a:hover footer {
  opacity: 0.5;
}

这是一个可用的 fiddle 。

https://jsfiddle.net/djL0Lwbp/