鼠标悬停时从数据目标弹出图像

Question

我有一个链接，并在其旁边有一个图标：

<a href="javascript:void(0)" data-target="/link/to/image.jpg"><span id="icon"></span></a>

您能给我看一个小的js / jQuery /代码，在鼠标悬停时弹出一个弹出窗口，并将数据目标的图像放在右下角吗？

像这样：

Answer 1

实际上，为了展示这一点，您根本不需要jQuery，因为您可以使用CSS来完成此操作，如下所示： http : //jsfiddle.net/wwp66o9s/1/

<ul>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
  <li>
    <a href="javascript:void(0)">
      This is some link
       <img src=http://lorempixel.com/400/200/>
    </a>
  </li>
</ul>


li {
  list-style: none;
  position: relative;
}
li a > img {
  display: none;
  position: absolute;
  top: 10px;
  left: 150px;
}
li a:hover > img {
  display: block;
}

Answer 2

这里的链接是它悬停的类名

$(".link").mouseover(funtion(){
    var imagepath = $(this).attr("data-target")
    $( "this").tooltip({ content: "<img src='"+imagepath+"'/>" });  
})

Answer 3

试试这样的东西https://jsfiddle.net/2Lzo9vfc/354/

我正在使用Bootstrap List组元素和一些自定义JQuery 。 您还可以轻松地自定义window类以满足您的需求。

$('.list-group a').hover(function() {
  var image = $(this).data('target');
  $(this).append('<div class="window"><img src="'+image+'" alt=""></div>')
},function() {
  $(this).find('.window').remove();
});

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = (e.pageX + 20) + 'px'; 
   mouseY = (e.pageY + 20) + 'px';
   $(this).find('.window').css({'top':mouseY,'left':mouseX});
}); 

.window {
  width: 60px;
  height: 60px;
  padding: 3px;
  border: 1px solid black;
  display: table;
  text-align: center;
  vertical-align: middle;
  position: fixed;
  z-index: 999;
}

.window img {
  display: table-cell;
  vertical-align: middle;
  max-height: 100%;
  width: auto;
}

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div class="list-group">
        <a data-target="http://placehold.it/50x50/533A71/ffffff" href="#" class="list-group-item active">
          Cras justo odio
        </a>
        <a data-target="http://placehold.it/50x50/6184DB/ffffff" href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a data-target="http://placehold.it/50x50/50C5B7/ffffff" href="#" class="list-group-item">Morbi leo risus</a>
        <a data-target="http://placehold.it/50x50/9CEC5B/ffffff" href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a data-target="http://placehold.it/50x50/F0F465/ffffff" href="#" class="list-group-item">Vestibulum at eros</a>
      </div>
    </div>
  </div>
</div>

Answer 4

我看到了一些很棒的例子，这是我的最佳选择。

注意：对CSS使用bootstrap。

演示

HTML：

<div class="container">
   <div class="list-group">
      <a data-target="link" href="#" class="list-group-item active">Cras justo odio</a>
      <a data-target="link" href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a data-target="link" href="#" class="list-group-item">Morbi leo risus</a>
    </div>
</div>
<!-- should be build in js - placeholder -->
<div id="hover-container"></div>

使用Javascript：

(function($) {
    var placeholder = $("#hover-container");

    function mouseIn(event){
            var picture = '<img src="'+$(this).data("target")+'" alt="">';
        $(placeholder).html(picture);
    }

    function mouseOut(event) {
        $(placeholder).css({
            left: -1000,
            top: -1000
        });
        $(placeholder).html("");
    }

    $("*[data-target]").hover(mouseIn, mouseOut);

    $("*[data-target]").mousemove(function(){
                $(placeholder).css({
            left: event.pageX + 15,
            top: event.pageY + 15
        });       
    });

}) ($);

我不建议自己建立这个。 作为学习jQuery或提高技能的工具，这是一项出色的练习，但最终却彻底改变了方向。

这是我个人使用过的很棒的图书馆。 qtip2