javascript - Mootools 链接悬停和颜色变化

Question

我正在使用 mootools 的 mouseenter 演示。我把它放在我的网站上试图影响链接，所以当有人将鼠标悬停在它们上面时，链接会淡入另一种颜色。我遇到的问题是 mootools 代码仅设置为处理一个 ID！由于我将它用于导航，因此我有多个要更改的 ID。我怎样才能影响他们所有人？我知道我应该使用一个数组，但是为了正确编码它，我对 Javascript 不太擅长。请帮忙！

网址是www.portfoliobyart.com/h20

Answer 1

我看了你的网站。在demo.js，如果你改变这一行

$('link').set('opacity', 0.5).addEvents({

对此：

$$('.nav a div').set('opacity', 0.5).addEvents({

您将为导航菜单中的每个项目实现相同的效果。

您应该阅读MooTools 选择器以了解更多信息。选择器是一个非常强大的工具。

Answer 2

下面的代码将采用每个导航链接元素并添加 mouseenter 和 mouseout 事件。

//selects all nav elements
$$('.nav a div').each(function(el){
    //this is the interior of the function that will run on each el
    //store the original bg color
    var color = el.getStyle('backgroundColor');

    //now add the mouseenter and leave events w/ the morphs
    el.set('opacity', 0.5).addEvents({
        mouseenter: function(){
        // This morphes the opacity and backgroundColor
            this.morph({
                'opacity': 1,
                'background-color': '#000000'
            });
        },
        mouseleave: function(){
        // Morphes back to the original style
            this.morph({
                opacity: 0.5,
                backgroundColor: color
            });
        }
    });
}); 

希望这可以帮助！