有时候，你可以在网站上看到，当你将鼠标悬停在图标，它正在改变背景颜色或其它图像. 要做到这一点，我们可以很容易地想到CSS离线为其用户悬停. 但是，使用本地再怎么? 目前，在这个时候我仍然不知道，但有 1 那种方法就是使用 的onmouseover的onmouseout VA.

尚未开始. 全部使用本地css.
现在我们有了 1 照片 (没有背景), 如何将鼠标悬停在其上以更改背景颜色?

<img style=" background: green;" 
       onmouseover = "this.style.background='blue';" 
       onmouseout = "this.style.background='green';" 
       src="http://i.imgur.com/Pb9njIR.png" 
  />

第一行设置图像的初始背景, 排 2 将鼠标悬停在图像上时设置背景, 当前 3 当鼠标移离图像时设置背景. 演示

跟随, 当我将鼠标悬停在图像上时，我想更改整个图像? 只需执行与上面相同的操作即可, 但用图像源链接替换背景.

<img src="http://i.imgur.com/Pb9njIR.png"
       onmouseover="this.src='https://i.imgur.com/KDmsF.jpg'"  
       onmouseout="this.src='https://i.imgur.com/Pb9njIR.png'"  
  />

演示

同样地, 我希望普通照片有点模糊, 当鼠标移过去时，图像变得更亮，我们使用属性 不透明度.

<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my facebook" target="_blank" href="https://www.facebook.com/nguyenvanquan7826"><img src="http://i.imgur.com/lLH2kv5s.jpg" alt="facebook" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my google+" target="_blank" href="https://google.com/+nguyenvanquan7826"><img src="http://i.imgur.com/u0VhMBcs.jpg" alt="google+" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my twitter" target="_blank" href="https://twitter.com/baytamhaisau"><img src="http://i.imgur.com/Op7dTfNs.jpg" alt="twitter" width="50" height="50" /></a>
<a style="opacity:0.1" onMouseOver="this.style.opacity='1.0'" onMouseOut="this.style.opacity='0.3'" title="my youtube" target="_blank" href="https://www.youtube.com/user/nguyenvanquan7826"><img src="http://i.imgur.com/9aTlnSks.jpg" alt="youtube" width="50" height="50" /></a>

不幸的是，在 wordpress.com 博客中他们不允许这样做 =)). 如果你知道如何在WordPress Blog上使用，请分享给大家.