當我將鼠標懸停在圖像上時，它爲什麼不起作用？

Question

我敢肯定，一旦我得到提示，這是非常愚蠢的，但我不明白爲什麼懸停不起作用。我添加了jQuery來檢查它是否與點擊一起工作。

$(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

因爲你.popover DIV不是.figure DIV的孩子。

用於+選擇此

$(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

變化：

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

要：

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

Answer 3

嘗試將類更改爲id並使其懸停。

JSFiddle link

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