javascript - JQuery .hover/.on ('mouseleave' ) 无法正常运行

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');
});