Условия CSS - если элемент имеет оба класса

Question

Как создать условия в таблице стилей CSS?

Здесь у меня есть таблица стилей. Но если добавлен элемент div.menu_active на элемент, класс должен вести себя как его зависание? Как вы можете это сделать?

Или существует ли еще лучший способ составить таблицу стилей для этого решения?

<div class="menu">menu</div> 
<div class="menu menu_active">menu</div> // has to behave like menu:hover 

<div class="menu_green">menu</div> 
<div class="menu_green menu_active">menu</div> // has to behave like menu_green:hover 

div.menu { 
background:url('menu_opacity50.png'); 
} 

div.menu_green { 
background:url('menu_green_opacity50.png'); 
} 

div.menu_active { 
} 

div.menu:hover { 
background:url('menu_opacity100.png'); 
} 

div.menu_green:hover { 
background:url('menu_green_opacity100.png'); 
} 

Answer 1

Если я правильно понимаю, это то, что вам нужно:

div.menu:hover, .menu.menu_active { 
    background:url('menu_opacity100.png'); 
}  
div.menu_green:hover, .menu_green.menu_active { 
    background:url('menu_green_opacity100.png'); 
} 

.menu.menu_active будут выбирать элементы, которые имеют и of перечисленные классы, такие как <div class="menu menu_active">.

Answer 2

Накладка парение элемент точно над нормальным состоянием и скрыть его (дисплей: нет), то с помощью JS/JQuery для переключения отображения.

Answer 3

Я думаю, что вы могли бы означать следующее:

div.menu.menu_active, 
div.menu:hover { 
    background:url('menu_opacity100.png'); 
} 

div.menu_green.menu_active, 
div.menu_green:hover { 
    background:url('menu_green_opacity100.png'); 
} 

Answer 4

Вы можете сделать это

div.menu { 
    background:url('menu_opacity50.png'); 
} 

div.menu_green { 
    background:url('menu_green_opacity50.png'); 
} 

div.menu.menu_active { 
    background:url('menu_opacity100.png'); 
} 

div.menu_green.menu_active { 
    background:url('menu_green_opacity100.png'); 
}