如何让 jquery mouseenter 只影响一个 DIV

Question

我是 jquery 的新手。我正在建立图像组合。基本上我有 2 div classes。在主 class 里面我有一张图片。当我用鼠标进入主 DIV 时，我得到第二个 div 进行动画处理。效果很好，但是当我复制主 DIV 2 次或更多次时，在 MOUSEENTER 上每个 DIV 都会被触发。我怎样才能只触发鼠标所在的DIV，而其他人不受影响。谢谢你。我会给你我的 jquery 和 html 代码。并提供我的问题的图片。

jQuery:

$(document).ready(function () {
    $(".main").mouseenter(function () {
        $(".blue").animate({
            left: '0px',
            opacity: '0.6',

        }, "slow");
    })

    $(".main").mouseleave(function () {
        $(".blue").animate({
            left: '-250px',
            opacity: '1.0',

        }, "slow");
    });
});

HTML:

<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
    <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
    </div>

    <a href="#">
        <img src="uploads/windows.jpg" alt="windows">
    </a>
</div>

The problem image

Answer 1

您可以使用 .find() 或传递上下文来查找相对于悬停元素的 blue 元素

$(document).ready(function() {
  $(".main").mouseenter(function() {
    $(this).find(".blue").stop().animate({
      left: '0px',
      opacity: '0.6',
    }, "slow");

  })

  $(".main").mouseleave(function() {
    $(this).find(".blue").stop().animate({
      left: '-250px',
      opacity: '1.0',
    }, "slow");

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>

Answer 2

使用hover() to combine both event handler. Also set this context to select .blue div inside the hovered element. Use stop()清除动画队列。

$(document).ready(function() {
  $(".main").hover(function() {
    $(".blue", this).stop().animate({
      left: '0px',
      opacity: '0.6',
    }, "slow");
  }, function() {
    $(".blue", this).stop().animate({
      left: '-250px',
      opacity: '1.0',
    }, "slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>
<div class="main" style="margin:0 auto;background:#cecece;height:100px;width:350px;position: relative;overflow: hidden;">
  <div class="blue" style="background:#09bbfd;z-index:100;height:100px;width:250px;left:-250px;position:absolute;opacity:0.5;">
  </div>
  <a href="#">
    <img src="uploads/windows.jpg" alt="windows">
  </a>
</div>

如何让 jquery mouseenter 只影响一个 DIV

How to make jquery mouseenter affect only one DIV

jquery

mouseenter