чистый CSS без sass, наведите указатель мыши на один элемент и разверните остальные

Question

Использование чистого CSS. Без САСС. Мне интересно, можно ли написать что-то, что позволяет влиять на зависание (разный элемент немного расширяется), когда он зависает над другим элементом.

Так что в основном. Наведение над одним элементом расширило бы другой элемент div, который не является ни дочерним, ни родительским. Могу ли я сделать это с помощью чистого CSS?

Answer 1

CSS еще не поддерживает какой-либо родительский селектор, так что это все равно вне сферы видимости. Помимо детских селекторов (которые вы исключили) есть два брата-селектора + для смежных братьев и сестер и ~ для братьев и сестер вообще.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    display: inline-block; 
 
    background: blue; 
 
    vertical-align: top; 
 
    transition: 1s all; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    padding: 20px; 
 
    color: white; 
 
} 
 

 
div#one:hover + div#two { 
 
    width: 200px; 
 
} 
 

 
div#one:hover ~ div#three { 
 
    background: red; 
 
}

<div id="one">Hover me!</div> 
 
<div id="two"></div> 
 
<div id="three"></div>

Примечание: селекторы Родственные работают только в порядке их появления в коде. Таким образом, div#two ~ div#one будет не влияет на первые div.