Question

我有一个包含8个链接的导航菜单，其中3个包含子菜单。当我将鼠标悬停在链接上时，颜色会从灰色变为金色。当我将鼠标悬停在具有子菜单的链接上时，它会显示子菜单。

我通过jQuery创建了一个带有子菜单的链接的onClick事件，这样当它被点击时，它将显示子菜单并将其保留在屏幕上并将链接颜色更改为金色（悬停颜色）。

但是，一旦您点击其中一个带有子菜单的链接，悬停颜色更改将不再适用于具有子菜单的其他链接，但它仍适用于普通链接。

home rules bonusrolls attendance reserves addons gallery info

在上述内容中，奖金，出勤和附加物都有子菜单。

因此，例如，启动一切正常。点击bonusrolls，它会显示其子菜单并永久地将bonusrolls更改为金币。现在，每当我将鼠标悬停在出勤或插件上时，它都会保持灰色，但我将鼠标悬停在家，规则，储备，画廊或信息上，并将其徘徊在黄金上。

#nav_whatever = sub menus
#whatever_menu = link

的jQuery

$("a#bonusrolls_menu").click(function () {
  event.preventDefault();
  $('#nav_bonusrolls').css('display', 'block');
  $('#nav_attendance').css('display', 'none');
  $('#nav_addons').css('display', 'none');
  $("a#bonusrolls_menu").css('color','#e97e1b');
  $("a#attendance_menu").css('color','#CCC');
  $("a#addons_menu").css('color','#CCC');
});

CSS（SCSS）

#main_nav {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    word-spacing: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    width: 100%;

    li {
        float: left;
        padding: 0 0 0 15px;

        &.nav_dropdown:hover {
            #nav_bonusrolls, #nav_attendance, #nav_addons {
                display: inline;
            }
        }

        ul {
            &#nav_bonusrolls, &#nav_attendance, &#nav_addons {
                display: none;
                position: absolute;
                margin: 0;
                padding: 10px 0 0 0;
                font-size: .7em;
                word-spacing: 1px;

                li {
                    margin-left: 10px;
                    display: inline;
                }
            }

            &#nav_bonusrolls {
                margin: 0 0 0 -18px;
            }

            &#nav_attendance {
                margin: 0 0 0 -125px;
            }

            &#nav_addons {
                margin: 0 0 0 -333px;
            }
        }
    }

    a:link, a:visited, a:active {
        color: #CCC;
    }

    a:hover {
        color: #e97e1b;
    }
}

编辑： http://oi39.tinypic.com/30sjz14.jpg

这是我正在谈论的形象。这显示了我点击了bonusrolls的位置，它突出显示并显示了菜单，但你可以看到我正在徘徊在插件上而且它没有改变颜色。或者更确切地说，你看不到我的鼠标（derp），但我在这张图片中徘徊在插件上。洛尔

小提琴 全屏 http://jsfiddle.net/SLNuJ/1/embedded/result/ 使用Code http://jsfiddle.net/SLNuJ/1

Answer 1

问题是您将color: #CCC作为点击处理程序的一部分内联添加到元素中。由于它们是内联的，因此它们会覆盖CSS文件中指定的任何内容。由于您在悬停CSS文件时更改颜色，因此它们不会显示。

我已经解决了这个小提琴中的问题：http://jsfiddle.net/SLNuJ/2/

唯一的变化是你的JS代码：

$(document).ready(function () {
    $("a#bonusrolls_menu").click(function (event) {
        event.preventDefault();
        $('#nav_bonusrolls').css('display', 'block');
        $('#nav_attendance').css('display', 'none');
        $('#nav_addons').css('display', 'none');
        $("a#bonusrolls_menu").css('color', '#e97e1b');
        $("a#attendance_menu").css('color', '');
        $("a#addons_menu").css('color', '');
    });

    $("a#attendance_menu").click(function (event) {
        event.preventDefault();
        $('#nav_attendance').css('display', 'block');
        $('#nav_bonusrolls').css('display', 'none');
        $('#nav_addons').css('display', 'none');
        $("a#attendance_menu").css('color', '#e97e1b');
        $("a#bonusrolls_menu").css('color', '');
        $("a#addons_menu").css('color', '');
    });

    $("a#addons_menu").click(function (event) {
        event.preventDefault();
        $('#nav_addons').css('display', 'block');
        $('#nav_bonusrolls').css('display', 'none');
        $('#nav_attendance').css('display', 'none');
        $("a#addons_menu").css('color', '#e97e1b');
        $("a#bonusrolls_menu").css('color', '');
        $("a#attendance_menu").css('color', '');
    });
});

代替将颜色设置为#CCC，只需从元素的内联样式中删除颜色。

P.S。：使用JSFiddle提供的“Tidy Up”按钮。它确实让你的代码看起来很棒。

导航菜单onClick / hover

1 个答案: