添加“onmouseover”状态到 Javascript 代码

发布于 2025-01-04 05:07:06 字数 1337 浏览 5 评论 0原文

我还无法编写 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>

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丑疤怪 2025-01-11 05:07:06

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

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

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

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

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

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

回复收藏 0 原文

梦过后 2025-01-11 05:07:06

尽管这可能与主题无关，但您是否尝试过 Jquery 库。我认为它比standrad javascript 更可靠、更有效。

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

现在回答你的问题。给你的 href 一个这样的 over 类：

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

然后在 css 中隐藏你的文本块。像这样：

#hidden1{
   display: none;
   }

然后添加一个简单的 jquery 片段。

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

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

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.

回复收藏 0 原文