Question

我想在包装div中做一个小div显示当它在悬停时它一切正常但是例如如果我从包装器传递到它旁边的包装器第一个包装器上的第一个小div喜欢卡住我认为这是一个停止（）问题，所以我怎么能解决它，谢谢。

$(function(){
        $(".show-more").hide()
        $(".product-box").hover(function(){
            $(this).stop().children(".show-more").show("slide", { direction: "down" }, 300);
            })
        $(".product-box").mouseleave(function(){
            $(this).stop().children(".show-more").hide("slide", { direction: "down" }, 300);    
                })
});

HTML CODE是：

<div class="product-box">
<div class="show-more">
</div>
<img src="'.$pic.'" />
<ul>
<li>'.$designiation.'</li>
<li>'.$type.'</li>
<li><strong>'.$variete.'</strong></li>
</ul>
</div>'

这个html代码在php循环中。

Answer 1

LIVE DEMO

这样的东西？

$(".product-box").hover(function(){
  $(this).find(".show-more").stop().slideToggle(300);
});

请记住，将hover用作命名方法.hover()是一种注册mouseenter和mouseleave事件的方法。

Answer 2

试试这个，

$(".product-box").hover(function(){
    $(this).find(".show-more").stop().slideDown(300);
},function(){
    $(this).find(".show-more").stop().slideUp(300);
});

Working Demo

阅读slideDown()和slideUp()

Answer 3

工作小提琴：http://jsfiddle.net/patelmilanb1/DDqFm/

$(function () {
    $(".show-more").hide();
    $(".product-box").hover(function () {
        $(this).find(".show-more").slideDown(300);
    }, function () {
        $(this).find(".show-more").slideUp(300);
    });
});

当我悬停另一个div容器时如何停止show（）？

3 个答案: