使用javascript在其父级附近弹出显示_Javascript_Jquery_Popup_Position

使用javascript在其父级附近弹出显示

javascript jquery

使用javascript在其父级附近弹出显示,javascript,jquery,popup,position,Javascript,Jquery,Popup,Position,我的网页中有一些图像，我想在用户将鼠标悬停在每个图像附近时显示一个弹出窗口，当用户将鼠标移到其他位置时，弹出窗口消失我在很多网站上都看到了这个功能，但我不知道该怎么做我看到了jquery UI，但对话框与我的目标不匹配你知道吗我只是测试了一下，但没有结果： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我的网页中有一些图像，我想在用户将鼠标悬停在每个图像附近时显示一个弹出窗口，当用户将鼠标移到其他位置时，弹出窗口消失

我在很多网站上都看到了这个功能，但我不知道该怎么做我看到了jquery UI，但对话框与我的目标不匹配

你知道吗

我只是测试了一下，但没有结果：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $("#hover1").mouseenter(function() {
   $("#content").fadeIn('fast');
});

$("#hover1").mouseleave(function() {
    $("#content").fadeOut('slow');
});
  </script>
</head>
<body>

    <p id="hover1">
   Hover here!
</p>
    <div id="content" style="display:none">
   Content here!
</div>

</body>
</html>

谢谢

用相对容器包装图像并放入绝对容器弹出窗口，向他显示：block；从显示：无；onbly然后将包裹容器悬停。不要忘记为弹出窗口设置z索引。

您需要使用jQuery mouseenter和mouseleave函数：

<p id="hover1">
   Hover here!
</p>

<div id="content" style="display:none">
   Content here!
</div>

$("#hover1").mouseenter(function() {
   $("#content").fadeIn('fast');
});

$("#hover1").mouseleave(function() {
    $("#content").fadeOut('slow');
});

这是疑难解答站点，不是脚本提供程序。所以，如果你试过，请发表一些脚本。诚然，我没有试过，但我说：[但我不喜欢它，因为我在很多网站上看到了在其父网站旁边打开的弹出窗口，当用户移动到其他网站时，这些弹出窗口就会消失。谢谢你的建议，但对我不起作用，：请参见我编辑的问题post@simonTifo你还没有包括jquery库。我解开了它，但在这里悬停时没有结果！@simont请看一看我提供的JSFIDLE，并确保左侧包含jQuery库。它显示了我提供的演示正在工作。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>