将“onmouseover”状态添加到 Javascript 代码答案

【问题标题】：Adding 'onmouseover' state to Javascript code将“onmouseover”状态添加到 Javascript 代码
【发布时间】：2012-03-01 13:45:20
【问题描述】：

我还不能编写 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>

非常感谢您的帮助！如果我发布了一个已经回答的问题，如果有人能指出我正确的方向，我将非常感激 - 我没有所有词汇来正确搜索答案。

【问题讨论】：

stackoverflow.com/questions/2707100/…
你可以看到这个问题的答案，关于如何在 javascript 上执行鼠标事件：stackoverflow.com/questions/2206831/show-div-on-mouseover。尽管这个问题是关于 mousemove 的，但您可以使用相同的示例，但将 'mousemove' 更改为 'mouseover' 并且它适用。

标签： javascript html hidden visible

【解决方案1】：

使用 onmouseover 事件激活“显示”切换。

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

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

【讨论】：

像魅力一样工作。非常感谢！

【解决方案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 代码片段。

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

与 javascript 不同，它适用于所有浏览器，我发现 Jquery 非常简单，使用起来也很有趣。出于您的目的，Jquery 无疑是一个不错的选择。

【讨论】：

【解决方案3】：

w3school

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

【讨论】：