Question

好的，在这里非常沮丧。我知道我想做的事情并不复杂，但我找不到一个简单的答案。

当我将鼠标悬停在图像上时，我想要一个弹出窗口。弹出窗口应位于图像右侧而已。

用于显示信用卡CVV＃的位置图像，如果他们还不知道的话。

我一直在寻找所有这些样本，将我正在寻找的内容与其他18个内容同时结合在一起，使得初学者无法对jquery进行排序。

我不想将它组合到一个菜单系统中，我不想将这个代码应用于某个标签的每个副本，我也不想让它唱歌和跳舞。

我相信弹出窗口必须在它自己的DIV中，因为触发悬停的图像位于我不想改变的表格内。

我大约2英寸（对于我的海外朋友来说是5厘米），而不是只是说fu - 它并在新的浏览器窗口中弹出它。我这样做的原因是因为我认为这是一种更好的风格，因为我想学习jquery。

如果有人可以用非常简单的语言向我解释，我会非常感激。如果你想添加一些你认为有用的功能，比如圆角，只要我能轻松告诉代码是什么，那就没关系。

非常感谢。

Answer 1

这样的事情可能是：

$('.popover').on({
    mousemove: function(e) {
        $(this).next('img').css({
            top: e.pageY - 260,
            left: e.pageX + 10
        });
    },
    mouseenter: function() {
        var big = $('<img />', {'class': 'big_img', src: this.src});
        $(this).after(big);
    },
    mouseleave: function() {
        $('.big_img').remove();
    }
});

DEMONSTRATION

或者没有javascript，只有CSS：FIDDLE

Answer 2

哇，冷静的人。

这是我建议使用的技术。

将<div>作为弹出窗口的容器添加到<body>的末尾。 http://jqapi.com/#p=append

接下来，您需要知道相对于文档，您想要设置它的位置。您可以使用jQuery的偏移量http://jqapi.com/#p=offset

来获取悬停元素的偏移量

然后你将计算悬停元素的宽度，然后使用CSS position: absolute在其旁边设置弹出窗口。要设置定位上下文，最佳做法是将position:relative设置为父元素，在这种情况下它是<body>。您需要为弹出容器设置top和left的CSS属性。

对悬停机制http://jqapi.com/#p=hover

的建议

您需要以函数的形式创建悬停处理程序。一个用于“悬停”的功能和一个用于“悬停”的功能

有一个popover http://twitter.github.com/bootstrap/javascript.html#popovers的引导实现也许查看来源可能会启发你。

希望有所帮助。

使用jquery悬停的弹出窗口

2 个答案:

使用jquery悬停的弹​​出窗口

2 个答案:

使用jquery悬停的弹出窗口