Adding 'onmouseover' state to Javascript code

Question

I cannot write Javascript code yet, and I'm trying to edit some code that toggles divs to be invisible/visible. Currently, it will reveal the div when the user clicks on the link - however, I'd like the hidden div to become visible on a mouseover instead.

Here is the Javascript code:

<script language="JavaScript">  function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        } </script>

Here is the HTML it is linked to:

<nav>   <ul>
        <li class="ovr"><a href="#" onclick="toggle('hidden1');">Overview</a></li>
    </ul> </nav>


<div class="container"> <div id="hidden1">  <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#objectives">Objectives</a></li>
        <li><a href="#semestertopics">Semester Topics</a></li>
        <li><a href="#greenteaching">Green Teaching</a></li>
        <li><a href="#howtodowellinthiscourse">How to Do Well in this Course</a></li>
    </ul> </div>

Thank you very much for helping! If I've posted a question that's already been answered, I'd be very grateful if someone could point me in the right direction - I don't have all the vocabulary to properly search for an answer.

http://stackoverflow.com/questions/2707100/how-to-show-hidden-divs-on-mouseover — jamesfrullo, Feb 09 '12 at 03:20
You can see the answers given to this question about how to do mouse events on javascript: http://stackoverflow.com/questions/2206831/show-div-on-mouseover. Even though this question was about the mousemove specifically, you can just use the same examples but changing 'mousemove' for 'mouseover' and it applies. — Roberto Linares, Feb 09 '12 at 03:23

score 0 · Answer 1 · answered Aug 28 '14 at 14:53

0

w3school

use 'mouseover' instead of 'onclick' in your code. this will solve your problem

answered Aug 28 '14 at 14:53

himanshu

1,732
1
11
12

Timeout · Accepted Answer · 2012-02-09T04:02:41.027

0

Use the onmouseover event to activate the "show" toggle.

http://www.w3schools.com/jsref/event_onmouseover.asp

<div id="hidden1" onmouseover="toggle('hidden1')">

edited Feb 09 '12 at 04:02

answered Feb 09 '12 at 03:19

Timeout

7,759
26
38

score 0 · Answer 3 · answered Feb 09 '12 at 03:34

Although this may be slightly of topic have you tried the Jquery library. I think that it is much more reliable and effective than standrad javascript.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Now for your question. Give your href a class of over like this:

<a href="#" class="over">Overview</a>

Then hide your block of text in css. Like this:

#hidden1{
   display: none;
   }

Then add a simple jquery snippit.

$(function(){
    $('.over').click(function(){
         $('#hidden1').toggle(); 
      }); 
  });

Unlike the javascript this will work on all browsers and I find that Jquery is very simple and even fun to use. For your purposes Jquery is defiantly a good option.

Adding 'onmouseover' state to Javascript code

3 Answers3