导航菜单onClick /悬停

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

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

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

home rules bonusrolls attendance reserves addons gallery info

在上面的内容中，红宝石，出勤和插件都有子菜单。

因此，例如，开始一切工作正常。点击红字，它会显示其子菜单并永久性地将红字更改为黄金。现在，每当我将鼠标悬停在出席者或插件上时，它仍然保持灰色，但是我将鼠标悬停在家中，规则，储备，画廊或信息上，并将它悬停在黄金上。

#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

来源

2013-11-15 Niketa

请创建一个[小提琴]（http://jsfiddle.net），这将吸引更多的人回答你的问题。以目前的形式，亲身体验你的问题是非常困难的。 – Chandranshu

我已经添加了这个。 – Niketa

我已解决您的问题并提供了工作代码。希望我能得到一个投票并接受:)。这个问题确实很棘手。 – Chandranshu

的问题是，您要添加的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提供的“整理”按钮。它确实使你的代码看起来不错。

来源

2013-11-15 16:44:10 Chandranshu

导航菜单onClick /悬停

回答

相关问题