Position popup image on mouseover

问题

I'm trying to replicate the effect seen on this webpage:

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

When hovering over the text in the alphabetical listing, a popup image appears directly to the left of the text. This page helped get me started but I would like my images to appear to the left, instead of below. Also how do I get a different image to appear for multiple <p>tags (instead of the just the one, (listed on the help page linked above) in 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>

The result is on this page if you scroll down a bit to "A Angles" and hover over the link.

Any help appreciated, thanks!

回答1:

Here's a quick way to do it.

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

script:

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

回答2:

Using Wil's answer as base, you can get the same result without using any 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;
}

Example in: http://jsfiddle.net/4hzenxkh/1/

回答3:

That site is doing it with 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;
}

It basically just displays the image on hover and then uses CSS for positioning.

TIP Use the chrome dev tools to inspect something like this.

Use the "select element" tool to choose one of the links
Select the "elements" tab
Under "styles" click the "toggle element state" icon and choose ":hover" - this puts the link in a hover state
Now you can select the pop-up image element to inspect the CSS used for styling

Hope this helps

来源：https://stackoverflow.com/questions/27004136/position-popup-image-on-mouseover

标签

javascript

html

css

onmouseover