JQuery .hover/.on（'mouseleave'）無法正常工作

我試圖使用懸停功能，這是相當簡單的，但我似乎無法使mouseout/mouseleave正常工作。JQuery .hover/.on（'mouseleave'）無法正常工作

代碼：

$(document).ready(function(){ 

$('.SList').css('display','none'); 

$(".MList a").on('mouseenter', 
    function(){ 
    var HTMLArr = $(this).children().html().split(':'); 
    $(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp&#9700;</p>'); 
    $(this).siblings('.SList').slideDown('slow'); 
    }) 
    .on('mouseleave',function(){ 
    var HTMLArr = $(this).children().html().split(':'); 
    $(this).children('p').replaceWith('<p>'+HTMLArr[0]+':&nbsp&#9698;</p>'); 
    $(this).siblings('.SList').slideUp('slow'); 
    }); 
});

的了mouseenter正常工作，但它甚至沒有進入的鼠標離開的代碼。任何想法將不勝感激。

Fiddle

來源

2013-04-18 Trae Moore

做一個js搗鼓我們與 –

玩燦你是否包含這段代碼運行的初始HTML（或者它的一個樣本，如果它非常大的話）？ –

當然，生病jsfiddle並鏈接它 –

看到這個：DEMO

$(".MList a").on('mouseenter', 
function(){ 
    var HTML = $(this).children('p').html(); 
    $(this).children('p').html(HTML.replace('◢','◤')); 
    $(this).siblings('.SList').slideDown('slow'); 
}) 
.on('mouseleave',function(){ 
    var HTML = $(this).children('p').html(); 
    $(this).children('p').html(HTML.replace('◤','◢')); 
    $(this).siblings('.SList').slideUp('slow'); 
});

來源

2013-04-18 14:40:58 Anujith

你必須與事件的錨的問題。

更改使用此：

$(".MList a").on('mouseenter', function() { 
    var myP = $(this).children('p'); 
    var HTMLArr = myP.text().split(':'); 
    myP.html(HTMLArr[0] + ':&nbsp&#9700;'); 
    $(this).next('.SList').slideDown('slow'); 
}).on('mouseleave', function() { 
    var myP = $(this).children('p'); 
    var HTMLArr = myP.text().split(':'); 
    myP.html(HTMLArr[0] + ':&nbsp&#9698;'); 
    $(this).next('.SList').slideUp('slow'); 
});

您有點擊相同的問題，重做同樣的事情。 SO，返工和重複使用：（你甚至可以變得更好，但是這顯示了該開始）

$(".MList a").on('mouseenter', function() { 
    down($(this).find('p').eq(0)); 
}).on('mouseleave', function() { 
    up($(this).find('p').eq(0)); 
}); 
$(".MList a").click(function() { 
    if ($(this).siblings('.SList').is(':visible')) { 
     up($(this).find('p').eq(0)); 
    } else { 
     down($(this).find('p').eq(0)); 
    } 
}); 

function up(me) { 
    var HTMLArr = me.text().split(':'); 
    me.html(HTMLArr[0] + ':&nbsp&#9698;'); 
    me.parent().next('.SList').slideUp('slow'); 
} 

function down(me) { 
    var HTMLArr = me.text().split(':'); 
    me.html(HTMLArr[0] + ':&nbsp&#9700;'); 
    me.parent().next('.SList').slideDown('slow'); 
}

來源

2013-04-18 14:38:03

JQuery .hover/.on（'mouseleave'）無法正常工作

回答

相關問題