javascript - 在用户将鼠标悬停在图像上之前隐藏描述？

Question

我正在为这个元素寻求帮助。我希望能够将鼠标悬停在图像上，这个黑框会弹出，其中包含描述。我可以举一些例子说明我将如何做这件事吗？非常感谢大家的帮助!

当用户将鼠标悬停在图片上以获取描述时我想要做什么

Answer 1

用纯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>