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

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