描述隐藏，直到用户将鼠标悬停在图像上？

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>

Answer 2

@Allan Empalmado是对的。但是您可以使用纯CSS过渡属性添加CSS过渡以使其顺畅地流入和流出。将其添加到代码中......

#image_description {
    background-color: #333;
    color: #fff;
    oveflow:hidden;
    -webkit-transition: max-height 0.9s ease;
    -moz-transition: max-height 0.9s ease;
    transition: max-height 0.9s ease;
    max-height:0;
}
#the_image:hover ~ #image_description{
    max-height: 150px; 
}

-webkit-和-moz-制作CSS跨浏览器。这是一个简单的谷歌搜索，找到你可以使用过渡属性操作的其他属性。
希望你能找到其他你可以做的事情来增强Alans示例代码。快乐的编码!!