JQuery .hover / .on('mouseleave') 无法正常工作答案

【问题标题】：JQuery .hover / .on('mouseleave') not functioning properlyJQuery .hover / .on('mouseleave') 无法正常工作
【发布时间】：2013-04-18 14:09:40
【问题描述】：

我正在尝试使用非常初级的悬停功能，但我似乎无法让 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

【问题讨论】：

制作一个 js fiddle 供我们玩
能否包含运行此代码的初始 HTML（或者如果它非常大，请提供一个示例）？
当然，我会做一个 jsfiddle 并链接它
附带说明，一般的经验法则是块级元素不应位于内联元素中。所以你不应该像你的代码所暗示的那样拥有<a><p></p></a>。
@TraeMoore：看到这个jsfiddle.net/vSdtE

标签： javascript jquery hover mouseout

【解决方案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');
});

【讨论】：

【解决方案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');
}

【讨论】：