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

结合两个jQuery悬停脚本

3 个答案: