引用未包含在项目中的图像以在悬停时显示

Question

我在一个网站上工作，我无法控制其中的内容，也不知道进来的是什么内容（这就是我无法存储图像的原因）我想要的是当 class 被引用时，获取数据图像引用，然后当 class 悬停在上面时，它会显示被引用的图像。

<span class="myCard" data-image="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=386589&type=card">Mantis</span>

所以我想是这样的：

$('.myCard').mouseenter(function () {
            var img = new image();
            img.src = $(this).attr("data-image");
            $(img).show();
        });

但我无法让它工作，我哪里出错了？或者有更好的方法吗？

P.S。文档中会有多个图像，所以我不能在任何一个中硬编码任何内容。

谢谢

Answer 1

您需要将图像附加到 dom。您可以将它附加到任何地方，在此示例中，它被添加到范围：

$('.myCard').mouseenter(function () {
   var img = new Image();
   img.src = $(this).attr("data-image");
   $(this).append(img);
});

检查 jsfiddle here

Answer 2

检查下面的代码 -

$('.myCard').mouseenter(function () {
          var img = $('<img id="dynamic">');
          img.attr('src', $(this).attr("data-image"));
          img.appendTo($(this));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="myCard" data-image="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=386589&type=card">Mantis</span>

引用未包含在项目中的图像以在悬停时显示

Referencing images to show on hover that aren't included in the project

html

jquery

image

onhover