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库。我认为它比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(); 
      }); 
  });

与javascript不同，这适用于所有浏览器，我发现Jquery非常简单，使用起来很有趣。为了您的目的，Jquery绝对是一个不错的选择。

Answer 3

w3school

使用＆＃39; mouseover＆＃39;而不是＆＃39; onclick＆＃39;在你的代码中。这将解决您的问题

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

3 个答案: