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

尚未开始. Tất cả dùng css cục bộ.
Giờ chúng ta có 1 cái ảnh (không nền), làm sao hover chuột qua nó đổi màu nền?

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

Dòng đầu tiên đặt background ban đầu cho ảnh, 排 2 đặt background khi đưa chuột qua ảnh, 当前 3 đặt background khi đưa chuột ra khỏi ảnh. Demo

跟随, muốn đổi cả ảnh khi đưa chuột qua? làm tương tự như trên thôi, nhưng thay background bằng src link ảnh.

<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'"  
  />

Demo

Tương tự như vậy, muốn bình thường ảnh mờ chút, khi đưa chuột qua thì ảnh sáng hơn ta dùng thuộc tính opacity.

<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>

Rất tiếc là trong blog wordpress.com họ không cho dùng thế này =)). Bạn nào biết cách dùng trên Blog wordpress chia sẻ với mọi người nhé.