如何在鼠标翻转时更改图像<img>(悬停)

Question

如何更改图像(使用<img>标签设置,不是一个<div>或<some_selector>背景,可以通过在CSS中更改background或background-image属性轻松解决:hover)在鼠标翻转(悬停),如stackoverflow主页中的收藏夹标签删除按钮,其中(X)悬停时图像变红？

Answer 1

HTML

<div id="css-image-swap-1">
<img id="swap-1" src="default-image-url" alt="CSS image swap" />
</div>

CSS

#css-image-swap-1{
    width:300px; height:150px; background:url(swap-image-url);
}
#css-image-swap-1 img:hover{
    opacity:0;
}