如何讓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

回答

相關問題