如何让 jQuery 在鼠标悬停时执行一件事，在单击时执行另一件事？

Question

我正在构建一个照片库，它有两种查看图像的方式，第一种是鼠标悬停，以便显示工具提示预览图像，第二种是单击将查看者带到带有预览图像和更多信息的新页面关于图像，就像您在 iStock Photo 上看到的一样：http: //www.istockphoto.com/stock-photo-2159036-hot-air-balloons.php

您可以在这里查看我的开发页面：http://ee.rouviere.com/%5Ehtml/photography/index.html

目前我正在使用 fancybox，它可以很好地在以下情况下显示预览图像：您单击缩略图。但是，我想更改此设置，以便当您将鼠标悬停在缩略图上时它会出现。与此页面上的操作非常相似：http://www.webinventif。 fr/wp-content/uploads/projets/tooltip/02/ 事实上，如果当您单击图像时它会将您带到图像详细信息页面而不是仅在新窗口中加载图像，那么这将是完美的。

目前 fancybox jQuery 代码是这样的：

<script type="text/javascript">
jQuery(document).ready(function() {
    $("a.view-preview").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
});
</script>

我将不胜感激任何我能得到的帮助。谢谢！

Answer 1

听起来您想要的是工具提示而不是灯箱（fancybox）。尝试使用工具提示插件，例如 jQueryTools Tooltip。

---

更新：我更新了插件代码以使用以下 HTML 布局。将 标记中的 # 替换为用户单击图像时想要转到的页面。另外，这里有一个演示。

<ul>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" data-caption="Lake and a mountain" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" data-caption="Fly fishing" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" data-caption="Autumn" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" data-caption="Skiing on a mountain" alt="gallery thumbnail" />
    </a>
  </li>
</ul>

这是更新后的脚本：

/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){
  /* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

  /* END CONFIG */
  $("img.preview").hover(function(e){
    var t = $(this).attr('data-caption');
    var c = (t != "") ? "<br/>" + t : "";
    $("body").append("<p id='preview'><img src='"+ $(this).attr('data-fullimg') +"' alt='Image preview' />"+ c +"</p>");
    $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");
  }, function(){
    $("#preview").remove();
  });
  $("img.preview").mousemove(function(e){
    $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px");
  });
};

// starting the script on page load
$(document).ready(function(){
  imagePreview();
});