在onmouseover和onmouseout上苦苦挣扎

时间:2012-12-27 05:34:11

标签: javascript onmouseover onmouseout

我正在努力与onmouseover和onmouseout。

我去过的每个网站几乎都会显示这种语法。我几乎从Mozilla复制粘贴它。我遇到的问题是它立即调用largeDiv和smallDiv函数。 (最后,我希望在mouseover事件期间将新类应用于div,并在mouseout时返回旧类。)我很确定我的鼠标事件应该受到指责。我也想知道我的onload函数是否引起了任何问题,但是当我评论它时,唯一改变的是小div没有按预期加载。

我试图使用一个事件监听器,以为我没有正确调用该事件,但这根本不起作用,虽然我不确定我是否正确编码,并且没有花费超过一个小时的时间该死的东西!我已经尝试了很多调整,使用括号等来进行调整...无论如何,这里是代码:

var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();

我在浏览器中对此进行了编码,当我将其复制到jsFiddle以询问此问题时,它不会在加载时加载小div,但它会记录这些语句。我把它放在CodePen上,它按照我的描述工作。不确定是什么造成了这种情况,但这是第二次发生这种情况。

顺便说一下,如果你去CodePen或者jsFiddle,我知道我的设计技巧是缺乏的。我只是为了一个游乐场,以及一个保持代码有效的地方,就像一个笔记本。我向你保证会变得更糟。

与往常一样,任何帮助都表示赞赏。

2 个答案:

答案 0 :(得分:2)

var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions

答案 1 :(得分:2)

请转到下面的小提琴我做了一些小的改动,它对我来说工作正常

fiddle

你也可以使用

<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
    Mouse over this text
</div>

请参阅此处的工作示例fiddle 2