Как совместить: парить и: не в CSS

Question

Я понимаю, что я могу изменить стиль другого элемента при наведении на другой элемент, как это:

.element-one:hover .element-two { 
    opacity: 0.8; 
} 

Но как я могу изменить стиль всех элементов в страницу, кроме элемента-два, когда я наводил элемент-один?

Answer 1

Вы можете использовать .element-one:hover :not(.element-two).

Вот пример:

.element-one:hover :not(.element-two) { 
 
    opacity: 0.8; 
 
} 
 
.element-one { 
 
    background: black; 
 
    margin: 10px; 
 
} 
 

 
.element-one div { 
 
    background: green; 
 
    border: 1px solid blue; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}

<div class="element-one"> 
 
    <div class="element-two"> 
 
    element-two 
 
    </div> 
 

 
    <div class="element-three"> 
 
    element-three 
 
    </div> 
 

 
    <div class="element-four"> 
 
    element-four 
 
    </div> 
 
</div>

Однако - обратите внимание, что он будет работать только для элементов внутриelement-one и не для всех элементов страницы.
Например, вы можете сделать это с помощью body, но проблема заключается в том, что .element-two, вероятно, также находится внутри какого-либо другого элемента, который существует внутри body, и в таком случае .element-two получит непрозрачность из его содержащего элемента.