Question

我是jquery的新手。我正在建立一个图像组合。基本上我有2个div类。在主类里面我有一个图像。当我用鼠标进入主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

使用 hover() 组合两个事件处理程序。同时设置this上下文以在hovered元素内选择.blue div。使用 stop() 清除动画队列。

＆＃13;

$(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");
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

$(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");

  });
});

＆＃13;

<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>

＆＃13;

如何使jquery mouseenter只影响一个DIV

2 个答案: