JavaScriptコードにonmouseover状態を追加する

Question

JavaScriptコードはまだ書き込めません。divsを表示/非表示に切り替えるコードを編集しようとしています。現在、ユーザーがリンクをクリックしたときにdivが表示されますが、代わりにマウスオーバーで表示されるようにしたいと思います。ここで

はJavascriptコードです：

<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> 

ここではそれがリンクされているHTMLれる：

<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> 

を助けるためありがとうございました！すでに回答している質問を投稿した場合、誰かが正しい方向に向けることができれば非常に感謝しています。答えを正しく検索するためのすべての語彙を持っているわけではありません。

Answer 1

onmouseoverイベントを使用して、「表示」トグルをアクティブにします。

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

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

Answer 2

これは少しトピックのあなたはjQueryライブラリを試してみましたことかもしれないが。私はそれがstandrad javascriptよりはるかに信頼性が高く、効果的だと思う。

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

ここでご質問ください。あなたのhrefに次のようなクラスを与えてください：

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

cssであなたのブロックを隠してください。このように：

#hidden1{ 
    display: none; 
    } 

次に、簡単なjquery snippitを追加します。

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

これはすべてのブラウザで動作しますが、Jqueryは非常に簡単で楽しいと感じています。あなたの目的のために、Jqueryは挑戦的に良い選択肢です。

Answer 3

w3school

利用代わりに 'onclickの' あなたのコード内の 'マウスオーバー'。これはあなたの問題を解決します