CSS-Hover-Effekt funktioniert nicht bei Verwendung von ~, + oder>

Question

Ich versuche, den Hover-Selektor zu ändern, den ich jetzt habe, damit der p-Text angezeigt wird, wenn ich mit dem Mauszeiger über das Bild oder das "category card" div klicke . Ich habe ein paar Dinge ausprobiert, aber ohne Erfolg.

<div className="category-card" id="lessons-card"> 
    <div className="category-text" id="lessons"> 
     <h2>Lessons</h2> 
     <p className="category-card-p lessons-p">Lorem ipsum</p> 
    </div> 
    <img src= "assets/img.jpeg" className="category-image" /> 
</div> 

Ich habe das versucht, folgende mit ~> und +

.category-card:hover ~ .category-card-p{ 
    transform: scale(1.2); 
    opacity: 1; 
} 

Answer 1

Sie sind nicht ganz die Bedeutung dieser Selektoren schlagen:

• ~ bedeutet allgemeine Geschwister-Selektor. Das Element muss sich auf derselben Hierarchieebene wie der erste Selektor befinden und irgendwo nach der erste Selektor im Markup sein, um sich zu qualifizieren. .category-card-p ist ein Nachkomme, so dass es nicht funktioniert.

• > bedeutet direkte Nachkommenauswahl. Das Element muss ein unmittelbares Kind des ersten Wählers sein, um sich zu qualifizieren. .category-card-p ist kein sofortiges Kind, es ist ein Enkelkind, wenn du willst, damit das nicht funktioniert.

• + bedeutet benachbarte Geschwister Selektor. Das Element muss sich auf der gleichen Hierarchieebene befinden und muss das Element very next auf dieser Hierarchieebene sein, damit es nicht funktioniert.

.category-card:hover .category-card-p funktionieren würde, wie würde .category-card:hover .category-text .category-card-p. Sogar .category-card-p an sich würde funktionieren, vorausgesetzt, Sie haben keinen anderen, spezifischeren Selektor im Spiel.

Auch als J08691 erwähnt, ist das HTML-Attribut für Klassen class="", nicht className="". .className="" wird nicht funktionieren, aber eine oberflächliche Überprüfung in einem HTML-Validator würde das auf Anhieb fangen.