Question

我的脚本几乎完美地用于FF，Opera和IE。 Chrome和Safari的行为略有不同。

哈弗似乎工作正常。但当我将鼠标悬停在“选定”的li上时，它会附加一个div。这个额外的div与现有的div重叠，并没有提供平滑的悬停效果。 Chrome和Safari的行为与这个额外的div有点不同。当我将鼠标悬停在Chrome和Safari中选定的li时，他们会从所选的li中删除div并在第一个之前添加它。我知道这个额外的div来自jQuery脚本，但我无法解决这个问题。

HTML：

<div class="navigation">
<ul class="nav">
    <li class="first"><a href="#">List 1</a></li>
    <li class=""><a href="#">List 2</a></li>
    <li class=""><a href="#">List 3</a></li>
    <li class="last selected"><a href="#">List 4</a></li>
</ul>

CSS：

ul.nav li div.menu-hover { 
  width:10px; height:10px;
  background-color:black; position:absolute; left:40px; display:none;
}

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");

Answer 1

hover（function1，function2）jQuery函数有2个参数，它们是2个回调函数，当触发mouseOver事件时，以及当mouseOut被触发时分别调用。

在您的代码中，在您的悬停定义之后，您手动添加所选菜单，但悬停功能不管理以前的手动添加，因此您应该在代码中添加此特定情况。（当您第一次在菜单上输入鼠标时，没有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");
});

Answer 2

如果应修复当前菜单悬停（当前所选菜单），则可以测试此版本的代码。它保持当前菜单悬停不变，并在其他菜单上管理hover（）。这是菜单的基本行为。

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

});

jQuery菜单悬停，其中prepend / append在不同的浏览器中无法正常工作

2 个答案: