1

我的脚本在 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>

​</p>

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

2 回答 2

0

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");
});
于 2012-09-27T23:44:14.640 回答
0

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

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

});
于 2012-09-28T03:32:55.157 回答