CSS + Jquery - 我怎样才能获得这种效果？（当鼠标移过时弹出一个div）

Question

我正在寻找这样的事情：当我用鼠标浏览一些内容时打开一个div（有一些数据）。

你可以在这里看到一个例子：用鼠标浏览小照片：你可以看到在鼠标位置移动的div-popup。

正如所建议的那样，这可以用css + js（jquery。我怎么能这样做？页面中的JS文件不是很清楚，这就是为什么我要求任何帮助:)

干杯

Answer 1

这是有效的，但你的例子中的定位是用我想的javascript完成的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>

        <style type="text/css" media="screen">
            .popup{
                display: none;
            }

            .small:hover .popup{
                display: block;
            }


        </style>
    </head>
    <body>
        <div class="small">
            <div class="popup">
                this is the popup
            </div>
            this is the trigger
        </div>
        <div class="small">
            <div class="popup">
                this is the 2nd popup
            </div>
            this is the 2nd trigger
        </div>      
    </body>
</html>

Answer 2

解决方案非常简单。 你需要三件事：一个绝对定位的div，它没有嵌套在其他东西中（parent是<body> ），一个用于显示div并移动它的mousemove事件处理程序，以及一个用于隐藏它的mouseleave处理程序。

使用jQuery，您可以轻松地从任何事件处理程序中获取鼠标坐标： http ： //docs.jquery.com/Tutorials : Mouse_Position

// Get all elements you want a "popup" for
$(".popup")
// Attach a mousemove handler
.mousemove(function (e) {

   // Is there a absolutely positioned popup div already?
   // If not, create one and append to body
   var $popup = $("#popup");
   if (! $popup.length) {
      $popup = $("<div id='popup'>").appendTo("body");
   }

   // Position the popup by mouse coordinates, and make sure it's shown
   $popup.css({left: e.pageX + 20, top: e.pageY + 20}).show();
})
// Attach mouseleave handler to hide the popup
.mouseleave(function () {
   $("#popup").hide();
});

你会想要这个CSS：

#popup {
   position: absolute;
   width: 100px;
   height: 100px;
   background: #aaa; /* Just so you can see it */
}

在这里演示： http ： //jsfiddle.net/yEeyV/

Answer 3

div必须在那里，但看不见的display:none

通过CSS，您可以创建一个悬停嵌套规则：

div.withdata:hover div.helper {display:block}

<div class="withdata"><img ...><div class="helper"></div></div>

祝好运！

Answer 4

您还可以使用JQuery工具提示： http ： //craigsworks.com/projects/qtip/

CSS + Jquery - 我怎样才能获得这种效果？（当鼠标移过时弹出一个div）

问题描述

4 个解决方案

解决方案1
2 2010-12-16 15:40:30

解决方案2
2 已采纳 2010-12-16 23:16:33

解决方案3
0 2010-12-16 15:36:26

解决方案4
0 2010-12-16 22:48:47

CSS + Jquery - 我怎样才能获得这种效果？ （当鼠标移过时弹出一个div）

问题描述

4 个解决方案

解决方案1 2 2010-12-16 15:40:30

解决方案2 2 已采纳 2010-12-16 23:16:33

解决方案3 0 2010-12-16 15:36:26

解决方案4 0 2010-12-16 22:48:47

CSS + Jquery - 我怎样才能获得这种效果？（当鼠标移过时弹出一个div）

解决方案1
2 2010-12-16 15:40:30

解决方案2
2 已采纳 2010-12-16 23:16:33

解决方案3
0 2010-12-16 15:36:26

解决方案4
0 2010-12-16 22:48:47