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>

如果向下滚动一下“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 dev工具检查这样的东西。

使用“选择元素”工具选择其中一个链接

选择“元素”标签

在“样式”下，点击“切换元素状态”图标，然后选择“：悬停” - 这会使链接处于悬停状态

现在，您可以选择弹出图像元素来检查用于样式化的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/

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

3 个答案: