如何在鼠标悬停时显示/隐藏 div答案

【问题标题】：How to show/hide div on mouseover如何在鼠标悬停时显示/隐藏 div
【发布时间】：2012-08-03 08:11:22
【问题描述】：

我正在尝试在您将鼠标悬停时显示一个 div。

我正在使用 jQuery 1.3。

这是我所拥有的：

$('#hoveroverthis').hover(function() {$('#showbox').show()});

这不应该工作吗？

编辑：已修复。谢谢大家！

【问题讨论】：

js 代码很好：jsfiddle.net/9pNdm 所以请发布一个带有自包含示例的小提琴，展示您的尝试。
#hoveroverthis 是否可能在另一个 div 类中？
不，它会查找具有您提到的 ID 的元素，它不关心它的 parent 是谁。
@Senkou，不，没关系，因为您通过 id 属性定位元素。
您在编辑前的问题包含两个标签。那是错字吗？

标签： jquery html hide mouseover show

【解决方案1】：

您可以在$.document.ready()函数中编写此代码并检查它

【讨论】：

在 DOM 加载后将事件绑定到元素
@Senkou 检查它docs.jquery.com/Tutorials:Introducing_$(document).ready()

【解决方案2】：

这个问题的最终答案是：是，这应该可以工作假设您输入了正确的元素 ID，并且具有这些 ID 的元素存在于运行此脚本的时间。

为确保文档已准备好被 JavaScript 操作，请将您的代码包装在文档“就绪”事件的句柄中。 jQuery为此提供了一个快捷方式：

$(function() {
    // Everything in this context will be executed when the document is ready
    $('#hoveroverthis').hover(function() {$('#showbox').show()});
});

【讨论】：

这个脚本包含在标签中
@Senkou：那么这就解释了。由于您的脚本在页面中的元素创建之前运行，因此没有任何反应。请改用我的答案中的代码，它会起作用。

【解决方案3】：

你可以用这个：

$(document).ready(function(){//when document is ready (loaded) these functions will initialise
  $('#hoveroverthis').hover(function() {
     $('#showbox').show()
  },function() {//mouseleave event
     $('#showbox').hide()
  });  
});

【讨论】：