当光标悬停在图像上方时显示文本 [英] Show text when the cursor hovers over an image

问题描述

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

I am trying to accomplish of the task of displaying text below an image when you hover over it. I do not want to use the title attribute, because I want to be able style the text.

将在 Dribbble 。当您将鼠标悬停在某些图片上时，文字 PRO 会显示在张贴该图片的人的姓名旁边

An example would be at Dribbble. When you hover over some of the pictures, the text PRO shows up next to the name of the person that posted the picture

推荐答案

快速查看此 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

and your 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();
});

这将给你一个如何实现你想要的想法。显然可以改进。希望它有帮助。

This should give you an idea of how to achieve what your looking for. It obviously could be improved. Hope it helps.

这篇关于当光标悬停在图像上方时显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！