父小孩懸停不按預期工作

我有一個像這樣的HTML，其中inner是子div，outer是父div。父小孩懸停不按預期工作

我必須達到的要求：激活那個鼠標懸停的div。

我已經調用jQuery的懸停功能，它幫助我追加和刪除活動類。

問題：當我將光標移動到innerchild div時，它會被激活，但是當我將光標從內部div移出到外部父div時，它會被激活，但外部不會被激活。

我也跟蹤了鼠標移動。 https://jsfiddle.net/Simplybj/zaz1qh8e/2/。

結果：外層div的鼠標移開時，內部的div是懸停

$('div').hover(
 
    function() { 
 
    $('div').removeClass('activeHover'); 
 
    $(this).addClass('activeHover'); 
 
    }, 
 
    function() { 
 
    $(this).removeClass('activeHover'); 
 
    } 
 
);

.outer { 
 
    background-color: #aeaeae; 
 
    height: 200px; 
 
    width: 200px; 
 
    float: left; 
 
} 
 
.inner { 
 
    margin: 50px; 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 
.activeHover { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="inner"> 
 

 
    </div> 
 
</div>

來源

2016-02-15 mesimplybj

如果你徘徊，你也徘徊在父母孩子...你認爲？ –

是的，@Paulie_D。我有這個想法。我還嘗試解除兒童懸停時的所有懸停事件，但那也沒有奏效。我要和我的要求朋友一起去。你認爲我問不可能嗎？ – mesimplybj

如果要實現這一目標是不是被炒了，你要聽的mousemove事件。此外，我添加了event.stopPropagation();，因此當您在.inner div中懸停或移動時，.outer的事件不會被觸發。

$('div').bind({ 
 
    mouseenter: eve, 
 
    mousemove: eve, 
 
    mouseout: function() { 
 
    $(this).removeClass('activeHover'); 
 
    } 
 
}); 
 

 
function eve(event) { 
 
    event.stopPropagation(); 
 
    $('div').removeClass('activeHover'); 
 
    $(this).addClass('activeHover'); 
 
}

.outer { 
 
    background-color: #aeaeae; 
 
    height: 200px; 
 
    width: 200px; 
 
    float: left; 
 
} 
 
.inner { 
 
    margin: 50px; 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 
.activeHover { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="inner"> 
 

 
    </div> 
 
</div>

來源

2016-02-15 11:53:31

謝謝你！我其實需要那個。那麼我沒有想到鼠標移動。謝謝你 – mesimplybj

我的榮幸;）祝你好運... –

你好Mosh！，你能幫助我嗎？ http://stackoverflow.com/questions/35551847/track-only-mouse-move-of-hovered-child-element-in-a-nested-div-tag – mesimplybj

我嘗試不同的功能和鼠標懸停與jQuery鼠標離開，併爲我工作。你可以試試這個嗎？

$(document).ready(function(){ 
 
    $('.inner').mouseenter(function(){ 
 
    $(this).addClass('activeHover'); 
 
    $('.outer').removeClass('activeHover'); 
 
    }); 
 
    $('.outer').mouseenter(function(){ 
 
    $(this).addClass('activeHover'); 
 
    $('.inner').removeClass('activeHover'); 
 
    }); 
 
    $('.inner').mouseleave(function(){ 
 
    $(this).removeClass('activeHover'); 
 
    $('.outer').addClass('activeHover'); 
 
    }); 
 
    $('.outer').mouseleave(function(){ 
 
    $('.outer').removeClass('activeHover'); 
 
    }); 
 
});

.outer { 
 
    background-color: #aeaeae; 
 
    height: 200px; 
 
    width: 200px; 
 
    float: left; 
 
} 
 

 
.inner { 
 
    margin: 50px; 
 
    background-color: #ccc; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.activeHover { 
 
    background-color: green; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<div class="outer"> 
 
    <div class="inner"> 
 

 
    </div> 
 
</div> 
 

 
<ul class="mousemovement"> 
 

 
</ul>

來源

2016-02-15 12:15:27

謝謝Man !.謝謝你的努力：） – mesimplybj

父小孩懸停不按預期工作

回答

相關問題