JavaScript Forum

**Physicsguy** · 03-21-2010, 09:12 PM

Hello,

I am having some trouble with the following code:

Code:

<script type="text/javascript">

function navsi(appear) {
  if(appear == "in"){
    document.getElementById("navsi").style.display="block";
  }
  else {
    document.getElementById("navsi").style.display="none";
  }
}

</script>

<ul>
<li onmouseover="navsi(in)" onmouseover="navsi(out)">Hover Me!!</li>
<div id="navsi" style="display:none;">Hi there!!</div>
</ul>

I want it so when you hover over the text 'Hover Me!!', it shows the text "Hi there!!", and when you remove your mouse, it hides it again.

Of course, I could do this with two functions, but that wastes space, so I was wondering if this was possible?

Thanks,

-PG

**tripy** · 03-22-2010, 07:20 AM

You have 2 "onmouseover" events. Your second should be "onmouseout":

HTML Code:

<html>
    <body>
    <script type="text/javascript">
    function navsi(state) {
        if(state==1){
            document.getElementById('navsi').style.display="block"
        }else{
            document.getElementById('navsi').style.display="none"
        }
    }
</script>

<ul>
<li onmouseover="javascript:navsi(1)" onmouseout="javascript:navsi(0)">Hover Me!!</li>
<div id="navsi" style="display:none;">Hi there!!</div>
</ul>
    </body>
</html>

**wayfarer07** · 09:54 AM

Also, with your original function you'll have to either to it with 1,0 like Tripy, or else put single quotes around your arguments. The way you're passing the (in), (out), the it looks as if you expect there to be a two variables named in, out, and are passing those. Try ('in'), ('out'). You could also just pass (true), (false) and test for that.

HTML Code:

<script type="text/javascript">

function navsi(appear) {
  if(appear){
    document.getElementById("navsi").style.display="block";
  }
  else {
    document.getElementById("navsi").style.display="none";
  }
}

</script>

<ul>
<li onmouseover="navsi(true)" onmouseout="navsi(false)">Hover Me!!</li>
<div id="navsi" style="display:none;">Hi there!!</div>
</ul>

Putting DIV within a UL without wrapping it in a LI is not valid code, and might cause problems in different browsers.

**Physicsguy** · 03-22-2010, 03:36 PM

Thank you both of you!

I have fixed it, all I did was put single quotes around the "navsi('in')" and changed the second onmouseover to onmouseout! Now it works; thank you!!!!!