Question

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

eval'
          from /Users/nho/.rvm/gems/ruby-2.2.1/bin/ruby_executable_hooks:15:in

你能给我看一个小的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 列表组元素和一些自定义 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。

Demo

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

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

4 个答案: