CODEWITHSUNDEEP
javascripthtml
YSbakker
YSbakker

Reputation: 707

"onmouseover" and "onmouseout" not working

I'm trying to achieve something quite simple. Whenever a user hovers over an element, I want a JavaScript function to run that makes another div visible. I tried using onmouseover and onmousedown to achieve this, but it doesn't seem to work the way I want it to.

I set up a fiddle here

Upvotes: 2

Views: 5686

Answers (1)

Vedant Terkar
Vedant Terkar

Reputation: 4682

Working Fine for me.

Just wrap your javascript code in <head>.

as follows:

<html>
<head>
<script type="text/javascript">
function showMenu() {
    document.getElementById("menu").style.display = "block";
}

function hideMenu() {
    document.getElementById("menu").style.display = "none";
}
</script>
</head>
<body>
<div id="button" onmouseover="showMenu()" onmouseout="hideMenu()"></div>
<div id="menu"></div>
</body>
</html>

http://jsfiddle.net/L4Hzw/8/

OR you can use: window.function_name=function(){ } to make your code work, without wrapping it inside <head><script>

as follows:

<script type="text/javascript">
window.showMenu=function() {
    document.getElementById("menu").style.display = "block";
}

window.hideMenu=function() {
    document.getElementById("menu").style.display = "none";
}
</script>

http://jsfiddle.net/L4Hzw/10/

In your fiddle, It wasnt working because You were calling functions showMenu and hideMenu when they were not defined. So to eliminate that (To define them for current document inside current window) we can use window.function_name=function(){ } where window is global object in javascript referning to the documents parent element (Method 2)

OR

we can predefine the function in <head> tag of current document. (Method 1)

Upvotes: 3

Related Questions