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

我试图完成一个任务，当你把鼠标悬停在图片上时，在图片下方显示文本。我不想使用

title

属性，因为我希望能够设置文本的样式

---

例如在。当您将鼠标悬停在某些图片上时，文本PRO将显示在发布图片的人的姓名旁边

将文本置于div中，然后在图像悬停时显示该div，如下所示

<div id="div">Hiiii</div>
$('#img').live('mouseover', function(){
$('#div').show();
});

Hiiii
$（'#img'）.live（'mouseover'，function（）{
$（'#div'）.show（）；
});

定义一个函数，将参数作为要在悬停图像时显示的文本。然后，在该函数中，您可以动态创建一个div，并将文本放置在该div中，还可以根据鼠标指针的位置动态定位div，还可以为div添加css以提供样式效果。在图像的鼠标上方调用此函数。

---

希望这对您有所帮助。

我认为您必须使用jquery工具提示。下面是您可以从中找到最佳工具提示插件的链接

看看这篇文章

你的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>

还有你的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();
});

---

这应该给你一个如何实现你的目标的想法。这显然是可以改进的。希望有帮助。

我想可能是这样的，你想添加工具提示吗？嗯，不。。。我正在尝试创建游戏封面，当你把鼠标放在上面时。。。游戏的名字出现在像这样的图像的中间：

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

$('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();
});