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

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

Answer 2

将您的文字放在div中，然后在图像悬停时显示该div ..

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

Answer 3

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

Answer 4

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

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

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

Answer 5

$(function() {

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

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

});

Answer 6

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

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

6 个答案: