Question

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

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

所以我想的是：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>3.3</version>
    <configuration>
      <source>1.7</source>
      <target>1.7</target>
    </configuration>
</plugin>

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

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>

Answer 3

所以最后使用Peter Rasmussen的建议我做了这个：

            $('.myCard').mouseover(function (e) {
            var img = new Image();
            img.src = $(this).attr("data-image");
            var posx = e.clientX;
            var posy = e.clientY;
            $('#myHover').append(img);
            $('#myHover').show();
            $("#myHover").attr("style", "position:absolute; background: #fff; border: solid blue 1px; left:" + posx + "px; top:" + posy + "px;");
        });
        $('.myCard').mouseleave(function () {
            $('#myHover > img').hide();
        });

我创建了一个空Div，然后将图像附加到该div，将其定位，以便图像始终保留在类的任何位置（而不是将它放在每个类的相同位置）

感谢您的帮助：）

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

3 个答案: