jquery - 结合两个 jQuery 悬停脚本

Question

对于一个作品集，我创建了一个带有图片和带有附加潜台词的标题的条目。将鼠标悬停在图像上时，图像会从灰度变为彩色（css 图像替换）。当悬停在标题上时，它会向上滑动并显示一个潜台词。

我想结合这两个功能。当我将鼠标悬停在条目上的任何位置时，我会将图片从灰度更改为彩色，并且将潜文本向上滑动。

我设置了一个 JSfiddle：http: //jsfiddle.net/blendwerk/q8HtS/

我怎样才能达到我的目标。我很感激任何帮助。

Answer 1

http://jsfiddle.net/q8HtS/3/

您只需要在整个区域上附加鼠标事件，并带有图片和文本，并且为了重新绑定事件，您可以设置一个命名空间以在将来单独重新绑定它们。

Answer 2

尝试只向包装 div 添加一个悬停事件，如下所示

http://jsfiddle.net/C8yV7/

请注意，您可能还需要限制 div 的大小，当前为页面宽度的 100%

Answer 3

这是想要的效果：

$(function() {
    $(".fadeimg").find(".spanimg").hide();
    $(".fadesub").find(".spansub").hide();

    $(".fadeimg").hover(
        function(){
            $(this).find(".spanimg").stop(true, true).fadeIn(1000);
            $(this).next().find(".spansub").stop(true, true).slideDown(500);
        },
        function(){
            $(this).find(".spanimg").stop(true, true).fadeOut(1000);
            $(this).next().find(".spansub").stop(true, true).slideUp(500);
        }
    );
     $(".fadesub").hover(
         function() {
            $(this).find(".spansub").stop(true, true).slideDown(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeIn(1000);
         }, 
         function() {
            $(this).find(".spansub").stop(true, true).slideUp(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeOut(1000);
         }
     );
});