1

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

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

谢谢你

4

2 回答 2

0

您需要使用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>
于 2013-02-21T13:57:08.710 回答
0

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

于 2013-02-21T13:55:20.427 回答