2

当鼠标悬停在图像上时，跨度内容在两秒钟后向下滑动，当我将光标移出图像时，两秒钟后跨度向上滑动，这很好。

如果有人也将鼠标移到该跨度上，我想显示该跨度，我的问题就开始了......

我不知道我是否足够清楚，但我认为代码会告诉你的不仅仅是文字:)

链接：http: //jsfiddle.net/zDd5T/3/

HTML：

<img id="image" src="button_green.png" />
<span id="content">
    <a href="http://www.google.com">Link</a>
    Some content here
</span>

CSS：

#image{
   left:0px;
   position:absolute;
   z-index: 10;
}
#content{
   top:48px;
   left:0px;
   position:absolute;
   height: 100px;
   border: 1px solid #f00;
   display: block;
   z-index: 0;
   width: 100px;
}

JavaScript：

$(document).ready(function() {
    $('#content').hide();
    var over_img = false;
    var over_span = false;
    $('#image').live('mouseover', function() {
        over_img = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#content').live('mouseover', function() {
        over_span = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#image').live('mouseout', function() {
        over_img = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
    $('#content').live('mouseout', function() {
        over_span = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
});

提前致谢！

4

2 回答 2

0

如果我正确理解您的问题，我将重组您的标记如下：

<div class="container">
   <img ... >
   <div class="content">
     .....
   </div>
</div>

然后，不要将悬停事件绑定到图像，而是将其绑定到父容器。这样，一旦显示内容 div，它仍然在绑定了悬停事件的容器父元素内，因此当鼠标悬停在图像或内容 div（或任何其他元素）上时，它将保持可见容器内）

于 2012-03-02T00:56:16.857 回答
0

对于 jQuery 1.7+，不推荐使用 on() 而不是 .live() 。

我相信这应该可以解决您的问题：

$(document).ready(function() {
    var T1, T2;
    $('#content').hide();
    $('body').on({
        mouseenter: function() {
            clearTimeout(T2);
            T1 = setTimeout(function() {
                 $('#content').slideDown(1000);
            }, 2000);
        },
        mouseleave: function() {
            clearTimeout(T1);
            T2 = setTimeout(function() {
                 $('#content').slideUp(1000);
            }, 2000);    
        }
    }, '#image, #content');
});​

这是一个小提琴

于 2012-03-02T01:14:08.043 回答