javascript - 当光标悬停在图像上时显示文本

Question

我正在尝试完成当您将鼠标悬停在图像上时在图像下方显示文本的任务。我不想使用 title 属性，因为我希望能够设置文本样式。

一个例子是在Dribbble .当您将鼠标悬停在某些图片上时，文本 PRO 会显示在发布图片的人的姓名旁边

Answer 1

快速查看 JS FIDDLE .

你的 HTML

<ul>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption">this is my caption</div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
    <li>
        <div class="caption"><span>this is my caption</span></div>
        <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/>
    </li>
</ul>

CSS

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}

和你的javascript

$('ul li').mouseenter(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});

这应该让您了解如何实现您的目标。它显然可以改进。希望对您有所帮助。