Mootools 1.2: Làm mờ link khi hover
Chúng ta có thể dễ dàng set màu nào đó khi hover vào link với CSS, nhưng tại sao không thử tạo thêm 1 chút hiệu ứng?
window.addEvent('domready',function() { $each($$('.fade'), function(el) { var original = el.getStyle('color'); var morph = new Fx.Morph(el,{ 'duration':'400', link:'cancel' }); el.addEvents({ 'mouseenter' : function() { morph.start({ 'color': '#00cc00' }) }, 'mouseleave' : function() { morph.start({ 'color': original }) } }); }); });
Với đoạn code trên, tất cả link có class là "fade" sẽ được thêm vào hiệu ứng Fx.Morph khi bạn di chuột vào hoặc dời đi
Bạn có thể thay đổi thời gian thay đổi màu ở dòng 4: 'duration':'400'
Và thay đổi màu ở dòng 6:
'color': '#00cc00'