0

我在 Wordpress 页面上使用 JQuery 为 mouseenter 事件上的隐藏元素设置动画。隐藏元素是一个文本块，当鼠标进入包含图像缩略图的 div 时，它会向下滑动。我有动画工作，但是当隐藏元素向下滑动时，它会触发 mouseleave 函数，该函数会向上滑动 elemnet，从而产生不良的溜溜球效果。有谁知道如何告诉 JQuery 忽略向下滑动的元素，以便除非鼠标实际离开具有缩略图的元素，否则不会调用 mouseleave 函数。结果可以在这里看到：

http://jeremypiller.com/wordpress

任何帮助，将不胜感激。

这是 CSS（我正在操作 WordPress 生成的类）：

.wp-caption { 
    position:relative;
    width:150px;
    height:150px;
    color:#000;
    text-align:center; 
 }

.wp-caption img {
            position:absolute;
            width:150px;
            left:0px;
            top:0px;
 }


  .wp-caption p.wp-caption-text {
            font-size: 1em;
            line-height: 17px;
            width:150px;
                background-color:#fff;
            display:none;
            cursor:pointer; 
            margin:0;
            height:100px;
            position:absolute;
            left:0px;
            top:0px;
                opacity:0.8;
}

的HTML：

<div id="attachment_61" class="wp-caption alignnone" style="width: 160px">
<a rel="lightbox[roadtrip2]" href="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water.jpg">
<img class="size-thumbnail wp-image-61" title="enlarge_water" src="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water-150x150.jpg" alt="" width="150" height="150" />
</a>
<p class="wp-caption-text">Is this where the wp-caption gets added?</p>
</div>

和jQuery：

jQuery(document).ready(function(){
     $(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    }).mouseleave(function () {
            jQuery(".wp-caption-text", $this).slideUp('slow');
        });
        });
        });
4

2 回答 2

1

而不是一个 mouseleave 事件，让它成为一个绑定到 body 的新 mouseenter 事件。防止此事件从下面的图像和文本中冒出来。您可以使用 event.stopPropagation() 方法停止冒泡：

http://api.jquery.com/event.stopPropagation/

于 2011-01-25T21:47:43.570 回答
0

尽管 Harold 的方法最终没有按照我的评论工作，但他确实让我认为 mouseleave 事件不一定必须与触发 mouseenter 事件的相同元素绑定。这是现在按我希望执行的 JQuery 代码：

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    });
    });
    });

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

    jQuery(".wp-caption.alignnone").stop().mouseleave(function () {
    jQuery(".wp-caption-text", $this).slideUp('slow');
    });
            });
            });

这段代码可能会被缩短，看起来与我的原始代码相似。

于 2011-01-27T16:03:06.480 回答