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

【问题标题】：Show text when the cursor hovers over an image当光标悬停在图像上时显示文本
【发布时间】：2011-08-24 05:18:46
【问题描述】：

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

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

【问题讨论】：

我想，你想添加工具提示吗？
嗯。不...我正在尝试创建游戏封面，当您将鼠标放在它们上时...游戏名称出现在图像中间
类似这样的东西：dribbble.com

标签： javascript jquery css

【解决方案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();
});

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

【讨论】：

【解决方案2】：

在 div 中输入您的文本，然后在像这样的图像悬停时显示该 div..

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

http://slodive.com/web-development/best-jquery-tooltip-plugins/

【讨论】：

【解决方案5】：

$(function() {

    $('.bar').css({opacity:0});

    $('.foo').hover(function() {
        $('.bar').stop().animate({
            opacity: 1
        },'fast');
    },function() {
        $('.bar').stop().animate({
            opacity: 0
        },'fast');
    });

});

【讨论】：

【解决方案6】：

可能是这样的http://jsfiddle.net/konglie/SXFEn/

【讨论】：