Question

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

我在很多网站上都看到了这个功能，但我不知道如何做到这一点我看到了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>

谢谢

Answer 1

用相对容器包装图像并放入绝对容器（弹出窗口），显示他（显示：块;来自display：none;）onbly然后包装容器悬停。不要忘记为弹出窗口设置z-index。

Answer 2

您需要使用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');
});

http://jsfiddle.net/SzgqR/

<强>文档

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

修改

请务必在页面中加入jQuery。

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

用javascript弹出靠近其父母的显示

2 个答案: