javascript - 将鼠标悬停在图像上时显示描述

Question

我有这个 HTML :

<div class="left_area">
 <div class="caption"> 
   <a href="<?php echo $URL; ?>"><img src="<?php echo $images; ?>" alt="<?php echo $name; ?>" /></a>
   <span>test</span></div>
</div>

我希望当我用鼠标浏览图像时显示该范围内我想要的任何内容，甚至是按钮或粗体文本的图像。像这样的EXAMPLE

提前致谢!

Answer 1

尝试这样的事情 - DEMO

CSS

.caption {
    position: relative;
    width: 300px;
    cursor: pointer;
}

span {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);
    height: 200px;
    width: 300px;
    color: #fff;
}

JS

$('.caption').on({
    mouseover: function() {
        $(this).find('span').fadeIn(200);
    },

    mouseout: function() {
        $(this).find('span').stop().fadeOut(200);
    },
})