如何让jquery mouseenter只影响一个DIV

我是jquery的新手。我正在构建一个图像组合。基本上我有2个div类。而在主要课堂上，我有一个形象。当我用鼠标在主DIV上输入时，我得到第二个div来动画。它的效果很好，但是当我复制主DIV 2或更多时间时，在MOUSEENTER上每个DIV都会被触发。我怎样才能让鼠标触发的DIV，其他人不受影响。谢谢。我会给你我的jQuery和HTML代码。并提供我的问题是什么的形象。如何让jquery mouseenter只影响一个DIV

的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

来源

2015-11-04 Elisimo

考虑使用[CSS3过渡]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions），而不是实现此目的。 – fisk

使用hover()这两个事件处理程序结合起来。还设置this上下文以选择.blue div在悬停元素内。使用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>

来源

2015-11-04 13:58:30

我忘了所有关于使用'$（“...，this”）'，谢谢 – zer00ne

你可以使用.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>

来源

2015-11-04 13:57:38

另外，请考虑使用'hover（）'或链接事件。 – Tushar

如何让jquery mouseenter只影响一个DIV

回答

相关问题