Warum funktioniert es nicht, wenn ich auf dem Bild schwebe?

Question

Ich bin sicher, das ist unglaublich dumm, sobald ich einen Hinweis bekomme, aber ich kann nicht sehen, warum der Hover nicht funktioniert. Ich habe die jQuery nur hinzugefügt, um zu überprüfen, ob es mit einem Klick funktioniert.

$(document).on("click", ".figure", function() { 
 
    $(".popover").css("opacity", "1"); 
 
})

.container { 
 
    position: relative; 
 
} 
 

 
.popover { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 200px; 
 
    opacity: 0; 
 
    transition: opacity 0.5s ease-in-out 0s; 
 
} 
 

 
.figure:hover .popover { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='container'> 
 
    <div class='figure'> 
 
    <img src='https://placehold.it/100' /> 
 
    </div> 
 
    <div class='popover'> 
 
    <p> 
 
     Bla bla 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

Weil Ihr .popover div kein Kind von .figure div ist.

Gebrauchte + Selektor für dieses

$(document).on("click", ".figure", function() { 
 
    $(".popover").css("opacity", "1"); 
 
})

.container { 
 
    position: relative; 
 
} 
 

 
.popover { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 200px; 
 
    opacity: 0; 
 
    transition: opacity 0.5s ease-in-out 0s; 
 
} 
 

 
.figure:hover + .popover { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='container'> 
 
    <div class='figure'> 
 
    <img src='https://placehold.it/100' /> 
 
    </div> 
 
    <div class='popover'> 
 
    <p> 
 
     Bla bla 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

Wechsel:

.figure:hover .popover { 
    opacity: 1; 
} 

An:

.figure:hover + .popover { 
    opacity: 1; 
} 

Answer 3

Versuchen Sie Klassen in id's zu ändern und dann schweben Sie.

JSFiddle link

#figure:hover + #popover { 
    opacity:1; 
}