Question

我正在努力与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，我知道我的设计技巧是缺乏的。我只是为了一个游乐场，以及一个保持代码有效的地方，就像一个笔记本。我向你保证会变得更糟。

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

Answer 1

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

Answer 2

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

fiddle

你也可以使用

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

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

在onmouseover和onmouseout上苦苦挣扎

2 个答案: