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

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

一个例子将在Dribbble。当你将鼠标悬停在一些图片，文字PRO旁边张贴的图片

来源

2011-08-24 shnisaka

我想，你想添加工具提示吗？ – AlphaMale

嗯。不......我正在尝试创建游戏封面，并且当您将鼠标放在它们上面时...游戏名称出现在图像 – shnisaka

的中间，如下所示：http://dribbble.com/ – shnisaka

看看这个快速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(); 
});

这应该给你如何实现你想找的想法。它显然可以改进。希望能帮助到你。

来源

2011-08-24 05:38:09

给你的文字一个div内，然后显示在这样的形象的悬停该分区的人的名字显示出来..

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

来源

2011-08-24 05:22:55 Vivek

定义的说法，只要你想显示在盘旋的图像文本的功能。然后在该函数中，您动态创建一个div并将该文本放置在该div内，并根据鼠标指针位置动态定位div，并且还可以为div赋予css样式效果。在图像的鼠标悬停上调用此函数。希望这可以帮助你。

来源

2011-08-24 05:24:25 AmGates

我认为你必须使用jQuery工具提示。下面是从哪里可以找到最好的工具提示插件的链接。

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

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

来源

2011-08-24 05:25:57 munjal

$(function() { 

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

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

});

来源

2011-08-24 05:29:18 daryl

也许是这样http://jsfiddle.net/konglie/SXFEn/

来源

2011-08-24 05:38:23 Lee

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

回答

相关问题