Hover div, change: after pseudo другого div

Question

Можно ли изменить псевдоэлемент div :after при наведении курсора на другой div? Это будет выглядеть примерно так:

.div2:after { 
 
    width: 34px; 
 
    height: 2px; 
 
    padding-top: 10px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    content: ""; 
 
    background-color: red; 
 
    background-clip: content-box; 
 
} 
 
.div:hover + .div2:after { 
 
    background-color: blue; 
 
}

<div class="div">hover here</div> 
 
<div class="div2">...</div>

Я знаю, что я мог бы добавить стили с Js, но CSS единственным решением было бы неплохо.

Answer 1

Ваш селектор было хорошо, нужно просто определить содержание:

.div:hover + .div2:after { 
 
    content: 'hovering!' 
 
}

<div class="div">...</div> 
 
<div class="div2">...</div>

Или пример с содержанием как парения и не-зависания:

.div2:after { 
 
    content: 'not hovering' 
 
} 
 
.div:hover + .div2:after { 
 
    content: 'hovering!' 
 
}

<div class="div">...</div> 
 
<div class="div2">...</div>

Answer 2

Вы должны сначала определить псевдоэлементи дать ему некоторый контент, затем вы можете использовать селектор, который вы определили, чтобы изменить свойства этого псевдоэлемента. Попробуйте это:

.div2:after { 
 
    content: 'FOO'; 
 
    padding-left: 20px; 
 
} 
 
.div:hover + .div2:after { 
 
    color: red; 
 
}

<div class="div">Hover me!</div> 
 
<div class="div2">My :after content changes colour!</div>

Вы можете изменить :hover состояние CSS для изменения любых свойств вам требуется.