1

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

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

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

home rules bonusrolls attendance reserves addons gallery info

以上，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

这就是我所说的图像。这显示了我在哪里单击了红利，它突出显示并显示了菜单，但你可以看到我悬停在插件上并且它没有改变颜色。或者更确切地说，您看不到我的鼠标（derp），但我在此图像中将鼠标悬停在插件上。哈哈

小提琴 全屏 http://jsfiddle.net/SLNuJ/1/embedded/result/ 带代码 http://jsfiddle.net/SLNuJ/1

4

1 回答 1

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，只需从元素的内联样式中删除颜色即可。

PS：使用 JSFiddle 提供的“整理”按钮。它确实使您的代码看起来不错。

于 2013-11-15T16:44:10.413 回答