懸停時的元素不會更新

當我將鼠標懸停在來自不同ul的某些選項卡上時，我嘗試更新ul li。每一件事情好工作的第2個選項卡，但是當我嘗試移動到第三個標籤第一李它不會得到更新，即使我的權利我就可以了（顏色變化）懸停時的元素不會更新

https://jsbin.com/zaqutayuku/edit?html,output

$(".tabs").hover(function(){ 



    $('.nav > .tabs > .subnav').each(function(key,val){ 

     $(this).removeClass('show'); 

    }); 


    $(this).children('.subnav').addClass('show'); 

    $("#at > #one").text($(this).children('p').text()); 
    $("#at > #two").text(""); 

}); 


$(".subtab").hover(function(){ 

    $("#at > #two").text($(this).text()); 

});

來源

2015-07-19 Xtal

開發者控制檯中的任何錯誤？問題是關於展示新的內容或顏色變化？據我看到你的代碼，它的工作「罰款」 – lockedz

不，開發控制檯沒有錯誤。問題是更新下面的時候，當我在測試3 – Xtal

有兩個問題：首先，jquery hover()函數對鼠標輸入和鼠標離開事件作出反應。因此，每當用戶懸停選項卡或子選項卡時，您的事件就會翻倍。此外，當孩子subtab被徘徊時，因爲孩子是父容器的一部分，所以還執行tab懸停事件。

我編輯了您的代碼並使用了jQuery的mouseover()函數。選項卡事件現在位於具有選項卡標題的p元素上。首先懸停子標籤的情況也包含在JS部分中。

var menu; 
var submenu; 

$(".tabs p").mouseover(function(){ 
    $('.nav > .tabs > .subnav').each(function(key,val){ 
    $(this).removeClass('show');  
    }); 
    var parentTabs = $(this).parent('.tabs'); 

    parentTabs.children('.subnav').addClass('show'); 
    $("#at > #one").text($(this).text()); 
    $("#at > #two").text(''); 

}); 

$(".subtab").mouseover(function() { 
    $("#at > #one").text($(this).closest('.tabs').children('p').text()); 
    $("#at > #two").text($(this).text()); 
});

這裏是小提琴：https://jsfiddle.net/8L92a9ua/。

來源

2015-07-19 17:17:33

使用mouseenter事件和delegated events：

$(".tabs").mouseenter(function(){ 
    $('.nav > .tabs > .subnav').each(function(key,val){ 
     $(this).removeClass('show'); 
    }); 

    $(this).children('.subnav').addClass('show'); 

    $("#at > #one").text($(this).children('p').text()); 
    $("#at > #two").text(""); 
}); 

$(".nav").on('mouseenter', '.subtab', function(){ 
    $("#at > #two").text($(this).text()); 
});

https://jsfiddle.net/fh9czspu/2/

來源

2015-07-19 17:01:25 monkey

懸停時的元素不會更新

回答

相關問題