2017-08-01 61 views
2

我上的元素相結合三類CSS:沒有選擇 - 從懸停

base, base_green, base_blue 

我使用這個添加懸停效果排除多個類只base類(不base_green

.base:not(.base_green):hover { 
    background-color: #E2E2E2; 
} 

我如何使用兩個類來存檔?
這意味着,如果元素有base base_greenbase base_blue,不就可以了
如增加懸停效果。這樣的事情(不工作OFC)

.base:not(.base_green):not(.base_blue):hover { 
    background-color: #E2E2E2; 
} 

編輯:
謝謝大家的答案,我最初的解決方案正常工作
我曾在:not選擇該級聯香腸一個錯字在我的CSS文件
/捂臉

我會離開的問題,因爲它是,也許有人認爲它有用

+2

的可能的複製[我可以有多個:選擇不()] (https://stackoverflow.com/questions/5684160/can-i-have-multiple-not-selectors) –

+0

不知道,如果你有其他元素的類包含短語「base_」需要應用懸停狀態,但如果不,你可以試試'.base:not([class * =「base _」]):hov否則,如果可能的話,向不應該應用此狀態的元素添加一個類並將其用作選擇器可能更容易。 – UncaughtTypeError

+1

這對我來說至少在Chrome中是這樣的:https://jsfiddle.net/7assquqp/ –

回答

4

此:

.base:not(.base_green):not(.base_blue):hover { 
    background-color: #E2E2E2; 
} 

工作完全正常,如果拋出一個JSFiddle

與以下HTML測試:

<div class="base base_green">GREEN</div> 
<div class="base base_blue">BLUE</div> 
<div class="base base_green base_blue">GREEN & BLUE</div> 
<div class="base">BASE</div> 
+0

奇怪......它不適合我...我會更多地測試它 –

+0

它的工作原理...我在css文件中有一個錯字:/ ... thanx清除那個 –

+1

啊,好的舊錯字^^他們可以很討厭,很高興有幫助!這個項目@WolfWar祝你好運 – Simplicity