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 的代码。任何想法将不胜感激。

小提琴

Answer 1

看到这个： 演示

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

你有同样的点击问题，然后重做同样的事情。所以，返工和重用：（你甚至可以做得更好，但这表明了它的开始）

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