A标签中的H2和IMG - 在悬停时突出显示

Question

我想问一下是否可以将鼠标悬停在A标签内的IMG和H2标签上？

E.g：

<a href="/something">
    <img src="/img/something.png" onmouseover="this.src = '/img/something-alt.png';" onmouseout="this.src = '/img/something.png';">
    <h2 class="margin-top">Something</h2>
</a>

因此H2标签设置为A：HOVER颜色，图像切换到替代颜色。

提前谢谢！

Answer 1

将普通图像和备用图像放入单独的img标记中。

<a href="/something" class="big-link">
    <img src="/img/something.png" class="image-main">
    <img src="/img/something-alt.png" class="image-alt">
    <h2 class="margin-top">Something</h2>
</a>

然后CSS将是：

.big-link .image-alt{
    display:none;
}
.big-link:hover .image-alt{
    display:inline;
}
.big-link:hover .image-main{
    display:none;
}