jQuery菜单悬停，前置/追加在不同浏览器中无法正常工作

我的脚本在FF、Opera和IE中几乎完美地工作。Chrome和Safari显示出稍微不同的行为

哈弗似乎工作得很好。但是，当我将鼠标悬停在选定的li上时，它会附加一个div。此附加div与现有div重叠，不会产生平滑的悬停效果。Chrome和Safari的行为与此附加div稍有不同。当我将鼠标悬停在Chrome和Safari中的选定li上时，它们会从选定li中删除该div，并将其添加到第一个之前。我知道jQuery脚本中这个附加div的来源，但我无法解决这个问题

HTML:

jQuery：

$("ul.nav > li").hover(

function() {
    $(this).prepend("<div class='menu-hover'></div>");
    $("ul.nav > li div.menu-hover").fadeIn("slow");
}, function() {
    $(this).find("div:last").remove();
});

$("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
$("ul.nav > li.selected > div.menu-hover").fadeIn("slow");​

---

hoverfunction1、function2 jQuery函数采用2个参数，这两个参数是2个回调函数，分别在触发mouseOver事件和mouseOut事件时调用

在代码中，在鼠标悬停定义之后，您可以手动添加所选菜单，但鼠标悬停函数不管理以前的手动添加，因此您应该在代码中添加此特定情况。当您第一次用鼠标在菜单上输入时，没有鼠标退出事件

$(document).ready(function() {

    $("ul.nav > li").hover(function() {
        // previously remove all potential menu-hover
        $(".menu-hover").remove();

        // prepend the menu at the good place and show it smoothly
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");
    }, function() {
        // remove the menu on mouse Out
        $(this).find("div:last").remove();
    });

    // Manually select the first menu
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");
});

---

如果当前菜单悬停，则当前选定的菜单应该是固定的，您可以测试此版本的代码。它保持当前菜单悬停不变，并管理其他菜单上的悬停。 这是菜单的基本行为

$(document).ready(function() {

    $("ul.nav > li").hover(function() {

        // Do not append menu-hover on selected li
        if ($(this).hasClass('selected'))
        return;

        // Append menu-hover on non-selected li
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");

    }, function() {

        // Do not remove menu-hover on selected li
        if ($(this).hasClass('selected'))
            return;

        // Remove menu-hover on non-selected li
        $(this).find("div:last").remove();
    });

    // Manually set the current menu-hover
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");

});

---

我明白你添加$.menu-hover.remove的意思；但当我在不同的浏览器中尝试时，它仍然不能完美地工作。理想情况下，我想要的是当鼠标悬停时，它不应该删除.menu hover div。No仍然不工作。这又回到了最初的情况——在FF中有效，但在Chrome中无效。实际上，您的解决方案是有效的。这是我的CSS，发挥了。我花了好几个小时才弄明白。无论如何，非常感谢！！

$(document).ready(function() {

    $("ul.nav > li").hover(function() {
        // previously remove all potential menu-hover
        $(".menu-hover").remove();

        // prepend the menu at the good place and show it smoothly
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");
    }, function() {
        // remove the menu on mouse Out
        $(this).find("div:last").remove();
    });

    // Manually select the first menu
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");
});

$(document).ready(function() {

    $("ul.nav > li").hover(function() {

        // Do not append menu-hover on selected li
        if ($(this).hasClass('selected'))
        return;

        // Append menu-hover on non-selected li
        $(this).prepend("<div class='menu-hover'></div>");
        $("ul.nav > li div.menu-hover").fadeIn("slow");

    }, function() {

        // Do not remove menu-hover on selected li
        if ($(this).hasClass('selected'))
            return;

        // Remove menu-hover on non-selected li
        $(this).find("div:last").remove();
    });

    // Manually set the current menu-hover
    $("ul.nav > li.selected").prepend("<div class='menu-hover'></div>");
    $("ul.nav > li.selected > div.menu-hover").fadeIn("slow");

});