javascript - 在鼠标悬停时定位弹出图像

Question

我正在尝试复制在此网页上看到的效果:

http://www.strongtie.com/products/alpha_list.html?source=topnav

将鼠标悬停在按字母顺序排列的列表中的文本上时，弹出图像会直接出现在文本的左侧。 This page帮助我开始，但我希望我的图像显示在左侧，而不是下方。另外，如何为多个 <p> 显示不同的图像？ var pathToImage 中的标签(而不是只有一个，(在上面链接的帮助页面上列出)？

< script type = "text/javascript" >
  <!--	
  $(document).ready(function() {
    var yOff = 15;
    var xOff = -20;
    var pathToImage = "/v/vspfiles/images/simpson/A21__.jpg";

    $(".text-hover-image").hover(function(e) {
        $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
        $("#image-when-hovering-text")
          .css("position", "absolute")
          .css("top", (e.pageY - yOff) + "px")
          .css("left", (e.pageX + xOff) + "px")
          .fadeIn("fast");
      },
      function() {
        $("#image-when-hovering-text").remove();
      });

    $(".text-hover-image").mousemove(function(e) {
      $("#image-when-hovering-text")
        .css("top", (e.pageY - yOff) + "px")
        .css("left", (e.pageX + xOff) + "px");
    });
  });
//-->
< /script>

结果在这个page上如果您稍微向下滚动到“A Angles”并将鼠标悬停在链接上。

感谢任何帮助，谢谢!

Answer 1

这里有一个快速的方法。

http://jsfiddle.net/wilchow/4hzenxkh/

HTML:

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 1</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 2</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 3</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 4</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 5</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 6</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 7</a></p>
<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>test 8</a></p>

CSS:

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;

}
p.product a {
    display: inline-block;
    position: relative;
}
p.product {
    margin-left: 150px;
}

脚本:

$(document).ready(function() {
    $(".product a").mouseover(function () {
        $(".product a img").css("display", "none"); // hide all product images
        $(this).find("img").css("display", "inline-block"); // show current hover image
    })
    $(".product a").mouseout(function () {
        $(".product a img").css("display", "none"); // hide all product images
    })
});