2

我正在与 onmouseover 和 onmouseout 作斗争。

我去过的每个网站几乎都显示了这种语法。我实际上是从 Mozilla 复制粘贴的。我遇到的问题是它立即调用 largeDiv 和 smallDiv 函数。（最终，我希望在鼠标悬停事件期间将新类应用于 div，并在鼠标悬停时返回旧类。）我很确定我的鼠标事件是罪魁祸首。我也想知道我的 onload 函数是否引起了任何问题，但是当我将其注释掉时，唯一改变的是小 div 没有按预期加载。

我尝试使用事件侦听器，以为我没有正确调用事件，但这根本不起作用，尽管我不确定我是否正确编码，并且在这该死的东西上没有花费超过一个小时！我已经尝试了很多调整，camelcasing onmouseover，使用括号等......无论如何，这里是代码：

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，我知道我的设计能力是欠缺的。我这样做只是为了一个游乐场，以及一个保存有效代码的地方，比如笔记本。我向你保证，情况会变得更糟。

一如既往，任何帮助表示赞赏。

4

2 回答 2

3 
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
于 2012-12-27T05:58:09.597 回答
2

请转到以下小提琴，我做了一些小改动，对我来说效果很好

小提琴

你也可以用

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

请参阅此处的工作示例小提琴 2

于 2012-12-27T05:58:13.417 回答