图片标题在悬停时出现在单独的 div 中

Question

我对 jQuery 非常陌生，因此我将不胜感激您提供的任何帮助/建议！

我让它在 jsFiddle 中工作：http://jsfiddle.net/cakeeater/LUAtb/10/

基本上，当您将鼠标悬停在图像上时，我只需要图像的标题来替换“Hello”文本。

jQuery().ready(function() { 
jQuery("#caption").text('Hello'); });
jQuery('img.gallery').mouseenter(function() { 
   var title = $(this).attr("title");
jQuery("#caption").text(title); });
jQuery('img.gallery').mouseleave(function() { 
jQuery("#caption").text('Hello'); });

但是，当我将其放入网站时，“Hello”文本是唯一有效的功能 - 并且图像标题不会在悬停时显示：http://bit.ly/MNgdUS

我确信可能有更好的方法来编写脚本...我在 Firebug 中没有看到任何错误，我还尝试禁用站点上的所有其他脚本，结果相同。有任何想法吗？

Answer 1

这应该可行：

$(function() {
    "use strict";
    $("#gallerydescription").text("Hello");
    $("img.team").hover(
        function() {
            $("#gallerydescription").text($(this).attr("alt"));
        },
        function() {
            $("#gallerydescription").text("Goodbye");
        }
    );
});

使用.hover()。

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。您可以使用它在鼠标位于元素内时简单地将行为应用于元素。

调用$(selector).hover(handlerIn, handlerOut) 是以下的简写：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);