JQuery .hover / .on('mouseleave') not functioning properly

Question

I am trying to use the hover function which is pretty rudimentary, but I can't seem to get the mouseout/mouseleave to function properly.

Code:

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

The mouseenter works properly, but it is not even entering the code for the mouseleave. Any ideas would be greatly appreciated.

Fiddle

Answer 1

See this: 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

You have an issue with the anchor of the event.

Change to use this:

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

You have the same issue with click, and redo same thing. SO, rework and reuse: (you could even make it better but this shows the start of that)

$(".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◢');
    me.parent().next('.SList').slideUp('slow');
}

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