javascript - JQuery .hover / .on('mouseleave') not functioning properly -
i trying use hover function pretty rudimentary, can't seem mouseout/mouseleave 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]+': ◤</p>'); $(this).siblings('.slist').slidedown('slow'); }) .on('mouseleave',function(){ var htmlarr = $(this).children().html().split(':'); $(this).children('p').replacewith('<p>'+htmlarr[0]+': ◢</p>'); $(this).siblings('.slist').slideup('slow'); }); });
the mouseenter works properly, not entering code mouseleave. ideas appreciated.
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'); });
Comments
Post a Comment