javascript - 隐藏说明直到用户将鼠标悬停在图片上？

我正在寻找有关此项目的帮助。我希望能够将鼠标悬停在图像上，并弹出带有说明的黑框。我可以举一些我将如何做的例子吗？非常感谢大家的帮助！

用户将鼠标悬停在图像上以进行描述时我要做什么

最佳答案

使用纯CSS，您可以执行以下操作

#image_description {
    display: none;
    background-color : #333;
    color : #fff;
    padding  : 50px;
}

#the_image:hover~#image_description{
    display: block;
}

<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>

使用jQuery，您可以执行以下操作

$(document).ready(function(){
$("#the_image").hover(function(){
    $("#image_description").fadeIn();
}, function(){
$("#image_description").fadeOut();
});
});

#image_description { display : none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>

关于javascript - 隐藏说明直到用户将鼠标悬停在图片上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38066423/