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

Question

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

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

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

< 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>

如果您向下滚动一点到“A Angles”并将鼠标悬停在链接上，结果将显示在此 page 上。

任何帮助表示赞赏，谢谢！

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

Answer 2

那个网站是用 css 做的：

HTML

<td align="left" valign="top" class="alpha-list">
<p class="mainline PA_product"><a href="/products/connectors/PA.asp"><span>
<img src="/graphics/products/small/PA-PAHD-HPAHD3.gif" width="73" height="80" border="0">
</span>PA Holdown </a></p>
...
</td>

CSS

td.alpha-list A:hover span img {
  border: 1px solid #DDDDDD;
  padding: 2px;
  display: block;
  position: absolute;
  left: -90px;
  top: -25px;
  z-index: 102;
  background-color: #FFFFFF;
}

它基本上只是在悬停时显示图像，然后使用 CSS 进行定位。

提示 使用 chrome 开发工具来检查这样的东西。

1. 使用“选择元素”工具选择其中一个链接
2. 选择“元素”标签
3. 在“样式”下单击“切换元素状态”图标并选择“:hover” - 这会将链接置于悬停状态
4. 现在您可以选择弹出图像元素来检查用于样式的 CSS

希望对你有帮助

Answer 3

使用 Wil 的答案作为基础，您可以在不使用任何 javascript 的情况下获得相同的结果。

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 a img {
    display: none;
}
p.product a:hover img {
    display: inherit;
}
p.product {
    margin-left: 100px;
}

示例：http://jsfiddle.net/4hzenxkh/1/