Hover div, Änderung: nach Pseudo eines anderen div

Question

Ist es möglich, das Pseudo-Element :after eines divs zu ändern, wenn man über ein anderes div schwebt? Es würde wie folgt aussehen:

.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>

Ich weiß, ich Stile mit Js hinzufügen könnte, aber eine CSS einzige Lösung wäre schön.

Answer 1

Ihre Wähler waren in Ordnung, müssen Sie nur den Inhalt definieren:

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

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

Oder ein Beispiel mit ihrem Inhalt Schweben und nicht-Schweben:

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

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

Answer 2

Sie müssen zunächst das Pseudoelement :after definieren und ihm einen Inhalt geben. Dann können Sie den von Ihnen definierten Selektor verwenden, um die Eigenschaften dieses Pseudoelements zu ändern. Versuchen Sie folgendes:

.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>

Sie die :hover CSS Zustand ändern kann sich ändern, was auch immer Eigenschaften, die Sie benötigen.