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

【问题标题】：Referencing images to show on hover that aren't included in the project引用未包含在项目中的悬停时显示的图像
【发布时间】：2015-12-18 12:22:41
【问题描述】：

我在一个网站上工作，我无法控制内容，也不知道输入了什么内容（这就是我无法存储图像的原因）我想要的是当一个类被引用时，抓取数据图像引用，然后当该类悬停时，它显示被引用的图像。

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

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

附：文档中会有多张图片，所以我不能在其中任何一个硬编码。

谢谢

【问题讨论】：

你没有在任何地方附加你的图像，所以......无论如何，new image(); 必须是new Image();

标签： jquery html image onhover

【解决方案1】：

您需要将图像附加到 dom。你可以在任何地方附加它，在这个例子中它被添加到跨度中：

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

检查 jsfiddle here

【讨论】：

【解决方案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>

【讨论】：