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

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

示范

或者没有javascript,只有CSS:FIDDLE