2011-08-12 35 views
1

我使用MooTools的1.12如何在MooTools中的悬停元素上添加类?

如何广告类的悬停一个元素?

例如提前

<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a class="hover" href="example.html">Some text</a> <!-- I am over this link --> 
<a href="example.html">Some text</a> 

感谢

回答

4

简单地定义它增加了一个事件或删除mouseenter类:

我徘徊OVERR当链接我想这有这个

<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 
<a href="example.html">Some text</a> 

ANF和mouseleave

$$('a').addEvents({ 
    'mouseenter': function() { $(this).addClass('hover'); }, 
    'mouseleave': function() { $(this).removeClass('hover'); } 
}); 

但是,如果你正在使用这链路改变CSS属性,你最好使用:hover伪类CSS。使用伪类将使您的更改能够在没有Javascript的浏览器上工作。

+0

不需要$(this),只需要'this.addClass('hover');''和'this.removeClass('hover');'应该没问题。 – eerne

+0

@eerne:根据所使用的MooTools和浏览器版本的不同,'this'可能不会使用MooTools函数进行原型开发。使用'$(this)'更安全,并且不会对脚本的性能产生负面影响。 –

+0

它确实会影响性能,特别是对于可以快速连续触发多次的鼠标悬停/跳出事件。在这种情况下,'this'将被原型化 - '$$(“a”)'返回els并设置原型(对于IE6-8) –

相关问题