導航菜單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 /懸停

回答

相關問題