我敢肯定，一旦我得到提示，这将非常愚蠢，但我不明白为什么悬停不起作用。我添加 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>因为你的.popoverdiv 不是 div 的孩子.figure。
+为此使用选择器
$(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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句