Jquery .slideUp在具有相同类的多个div上

时间:2013-02-21 16:55:40

标签: jquery show-hide slideup mouseenter mouseout

您好我对jquery以及正确使用它来将函数应用于div的方式相当新,但它与多个div共享它的类。我想要的是在鼠标上应用.slideUp()一次输入div。我的问题是他们都有相同的类,当我的鼠标进入任何div时,他们都会向上滑动。下面是我用hquery使用.hide切换的html。我知道我需要使用某种变量或选择器来告诉jquery该做什么,但我想不出怎么做。任何帮助将不胜感激。

这是Jquery

$(document).ready(function(){


        $(".item1, .item2, .item3").mouseenter(function(){
          $(".black_overlay").toggle();
        });

这是html

<div id="container">
            <div class="item1">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>               
            </div>
            <div class="item3">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>
            <div class="item2">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>   
            </div>
            <div class="item3">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>
            <div class="item2">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>          
</div>

所有这些div最终将成为wordpress中的帖子,使用砌体在屏幕上组织它们。

1 个答案:

答案 0 :(得分:2)

使用.find()选择预期的一个:

$(".item1, .item2, .item3").mouseenter(function(){
      $(this).find(".black_overlay").toggle();
    });