Question

我正在尝试使用非常简陋的悬停功能，但我似乎无法让mouseout / 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工作正常，但它甚至没有输入mouseleave的代码。任何想法都将不胜感激。

Fiddle

Answer 1

请参阅：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');
});

Answer 2

您遇到活动主播的问题。

更改为使用此：

$(".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');
});

您在点击时遇到同样的问题，并重做同样的事情。所以，返工和重用:(你甚至可以把它变得更好，但这显示了它的开始）

$(".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');
}

JQuery .hover / .on（'mouseleave'）无法正常运行

2 个答案: