Question

我有这个标记x 3：

        <div class="features">
            <span class="overlay"><img src="img/webdesign.png" /></span>
            <h2>Web Design</h2>
            <p>Cow pig turkey, chuck sausage pork loin venison biltong shoulder. Shoulder pancetta short loin beef ribs, turkey corned beef shankle swine spare ribs pork chop hamburger beef brisket shank. Pork belly tenderloin brisket, strip steak ribeye bacon tail andouille shoulder t-bone flank venison chicken.</p>
        </div>

Span class overlay的位置绝对覆盖了h2 + P.我有三个div class features。我想在将鼠标悬停在features div上时使用jQuery，该div中的叠加层会向上滑动，当用户离开悬停时，将overlay div向下滑动。

$(".features").hover(
  function () {
    $('.overlay').slideUp();
  },
  function () {
    $('.overlay').slideDown();
  }
);

到目前为止我有这个，但我很清楚它不起作用:)。

Answer 1

将this上下文添加到jquery选择器函数，以便在当前悬停的DIV中选择类叠加的元素。

试试这个：

$(".features").hover(function() {     
    $('.overlay', this).slideUp();   
    }, function() {     
    $('.overlay', this).slideDown();   
});

Answer 2

.slideToggle()是你的朋友。

$(".features").hover(function ()
{
    $(this).find('.overlay').slideToggle();
    // or
    $('.overlay', this).slideToggle();
});

// fin

jQuery slideUp（）只是'this'div

2 个答案: