jquery：懸停不透明變化

我有一個div設置爲opacity:0.7。我想讓它過，所以我創造了出現100％的懸停不透明：jquery：懸停不透明變化

.fullopaque { 
opacity: 1; 
} 

("#menu DIV").hover(
    function() { 
    $(this).addClass('fullopaque'); 
    }, 
    function() { 
    $(this).removeClass('fullopaque'); 
    } 
);

我可以在我的控制檯，新的類被添加到div看到，但沒有任何視覺上的變化。

.fullopaque設置在我的CSS divs風格下面，所以不應該成爲一個問題。

有什麼我做錯了嗎？我似乎無法找出原因。

來源

2013-07-24 MeltingDog

嘗試以下：

$("#menu DIV").hover(
    function() { 
    $(this).css({ opacity: 1 }); 
    }, 
    function() { 
    $(this).css({ opacity: 0.7 }); 
    } 
);

這是jsfiddle

來源

2013-07-24 23:23:24

想必你正在運行到這一情況

<div class='seventypercent fullyopaque'></div>

所以，你有兩個類（說真的，兩個樣式聲明 - 將在後面提及）附加到這兩個都應該適用他們的規則，但在這種情況下，他們衝突。 CSS將使用某種層次結構來計算哪些規則應該優先考慮，在這種情況下，這是70％的不透明度。在你的榜樣，我想像你是其它選擇是#menu div，這是更具體的，因此將優先（CSS specificity can be complicated）

有一對夫婦的方式來解決這個問題。首先，這裏是需要jQuery的，何不乾脆做：

#menu div:hover { opacity:1; }

如果做不到這一點，你需要修改你的CSS，使您完全不透明類優先。你可以這樣做，像這樣：

#menu div.fullopaque { opacity:1; }

來源

2013-07-24 23:24:34

爲什麼不只是改變CSS來：

#menu:hover { 
    opacity: 100%; 
}

來源

2013-07-24 23:27:06 wheresmycookie

#menu DIV:hover{ 
opacity: 1; 
}

如果CSS的作品，我不會嘗試的JavaScript

來源

2013-07-25 00:20:23

jquery：懸停不透明變化

回答

相關問題