0

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

当我将鼠标悬停在图像上时，我想要一个弹出窗口。弹出窗口应该在图像的右侧。
就是这样。

如果他们还不知道，这用于显示在哪里可以找到信用卡的 CVV# 的图像。

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

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

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

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

如果有人可以用非常简单的术语向我解释一下，我将非常感激。如果您想添加一些您认为会有所帮助的其他功能，例如圆角，那没关系，只要我能轻松分辨出哪些代码与哪些内容搭配即可。

非常感谢你。

4

2 回答 2

11

可能是这样的：

$('.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();
    }
});

示范

或者没有 javascript，只有 CSS：FIDDLE

于 2013-03-29T00:06:31.480 回答
1

哇，冷静的人。

这是我建议使用的一种技术。

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

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

然后您将计算悬停元素的宽度，然后使用 CSS 将弹出窗口设置在其旁边，position: absolute. 要设置定位上下文，最好也设置position:relative为父元素，在本例中为<body>. 你需要为你的弹出容器设置 CSStop属性left。

悬停机制的建议http://jqapi.com/#p=hover

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

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

希望有帮助。

于 2013-03-29T00:02:10.117 回答