如何更改图像 <img> 鼠标翻转（悬停）

Question

如何更改图像（使用<img>标签设置，不是<div>或<some_selector>背景，可以通过更改background或background-image属性轻松解决:hover在CSS中）（像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;
}