淡出所有，但（此） - 雖然表示一個點擊（）

我試圖實現一個衰落的導航系統，在導航中的所有內容，但元素被盤旋將淡出說，0.3不透明度。淡出所有，但（此） - 雖然表示一個點擊（）

與此同時，我希望點擊具有更大的「價值」，以免淡出點擊元素（或在這種情況下，活動子頁面）..這對我沒有多大意義無論如何，我只會發布我的代碼。

<nav id="main"> 
     <ul> 
      <li> 
       <a>work</a> 
      </li> 
      <li> 
       <a>about me</a> 
      </li> 
      <li> 
       <a>contact</a> 
      </li>   
     </ul> 
    </nav>

，這使得它閃光的腳本：

var nava = "nav#main ul li a"; 

$(nava).hover(function(){ 
    $(nava).not(this).removeClass().addClass("inactive"); 
    $(this).addClass("active"); 
}); 

$(nava).click(function(){ 
    $(this).removeClass().addClass("active"); 
}); 

});

而類/ CSS（以內）：

.inactive {顏色：@ COLOR2; border-bottom：0 solid＃000;}

.active {color：@ color1;底部邊框：1px的固體＃000;}

導航＃主UL李一{顏色：@ COLOR1;}

基本上懸停狀態優先於點擊，我不希望發生的事情。

理想情況下，我希望所有的錨元素都能夠恢復到原來的狀態，只要你將鼠標懸停在無序列表中就可以完成它。如果任何人有這方面的一些指針，將不勝感激。乾杯！

編輯：爲了迴應克里斯蒂安瓦爾加 - 我明白了你的觀點，但我想要做的是以下幾點。

默認狀態：不透明度1

徘徊狀態：不透明度0.3（上一切，但懸停元素，懸停元素仍處於不透明1）

點擊（活動）國家 ：不透明度1（其他鏈接不會覆蓋單擊元素上的不透明度）。

Mouseout（從容器）：不透明度1對所有東西，除非鏈接已被點擊（活動）。

我希望能讓它更清楚一點，爲原始解釋道歉。

來源

2012-06-19 Kasper Lewau

你爲什麼要用jQuery綁定懸停？這就是CSS的用途:)。嘗試這樣的事情，而不是：

JS：

var nava = 'nav#main ul li a'; 

$(nava).click(function() { 
    $(nava).removeClass('active') 
    $(this).addClass('active'); 
});

CSS：

nav#main ul li a{color:#00ff00;} 
nav#main ul li a:hover{color:#00ff00; border-bottom:1px solid #000;} 
nav#main ul li a.active{color:#ff0000; border-bottom:0 solid #000;}

的jsfiddle：http://jsfiddle.net/Z2KMB/

而一個的jsfiddle與不透明的變化：http://jsfiddle.net/Z2KMB/1/

來源

2012-06-19 03:13:46

我唯一真正遇到的問題是（這是不透明度變化的jsFiddle），它是「默認」狀態，不透明度爲0.3。基本上我想它是：默認 - 1個不透明飛翔 - 0.3不透明（除正在徘徊的元素）點擊 - 1不透明鼠標移開從容器 - 1個不透明所以我非常知道我想要什麼（不要我們都），我只是不知道如何將它轉換成工作的jQuery代碼。 –

該評論沒有按照我的意思表示道歉。我將編輯主題欄以使其更清晰。 –

使用鼠標移開和mouseover，然後指定你想要的在你的案例中設置你想要的物品的類。

例子：

$("div.class").mouseout(function(){ 
     $("#control_name").removeClass("class_name"); 
    }).mouseover(function(){ 
     $("#control_name").addClass("other_class_name"); 
    });

顯然，你知道如何命名基於ID的類名和類型的等等。以上只是一個例子。

來源

2012-06-19 03:15:18

淡出所有，但（此） - 雖然表示一個點擊（）

回答

相關問題