Đôi khi các bạn thấy trong các website khi đưa chuột qua icon thì nó đổi màu nền hoặc là đổi ảnh khác. Để làm như vậy chúng ta có thể dễ dàng nghĩ đến CSS ngoại tuyến dùng hover cho nó. Nhưng sử dụng cục bộ thì làm thế nào? Hiện tại thời điểm này mình vẫn chưa biết nhưng có 1 cách đó là dùng onMouseOver và onMouseOut.
Bắt đầu nào. 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, dòng thứ 2 đặt background khi đưa chuột qua ảnh, dòng 3 đặt background khi đưa chuột ra khỏi ảnh. Demo
Tiếp theo, 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='http://i.imgur.com/KDmsF.jpg'"
onmouseout="this.src='http://i.imgur.com/Pb9njIR.png'"
/>
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. Demo
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é.
Tại sao bạn không dựng cho mình 1 host + web riêng, như thế sẽ không bị hạn chế bở WordPress 🙂
Mình cũng đã nghĩ đến vấn đề này nhưng nó có nhiều cái phức tạp nên chưa làm được =))
Tôi đã đọc một số bài viết trong blog, có vẻ như bạn quá khiêm tốn rồi 🙂
=)) Không phải thế. Mà là việc tạo host với tiên miền riêng nó hơi lằng nhằng 1 tẹo nên chưa làm được cái trang riêng 😀