将"onmouseover"状态添加到Javascript代码中

Question

我还不能写Javascript代码，我正在尝试编辑一些将div切换为不可见/可见的代码。目前，当用户点击链接时，它会显示div——然而，我希望隐藏的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事件激活"show"切换。

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

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

Answer 2

尽管这可能有点像主题，但您是否尝试过Jquery库。我认为它比标准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(); 
      }); 
  });

与javascript不同，它可以在所有浏览器上运行，我发现Jquery非常简单，使用起来甚至很有趣。就您的目的而言，Jquery无疑是一个不错的选择。

Answer 3

w3school

在代码中使用"mouseover"而不是"onclick"。这将解决您的问题