Javascript 当光标悬停在图像上时显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7170759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show text when the cursor hovers over an image
提问by syrkull
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 titleattribute, because I want to be able style the text.
当您将鼠标悬停在图像上时，我试图完成在图像下方显示文本的任务。我不想使用该title属性，因为我希望能够设置文本样式。
An example would be at Dribbble. When you hover over some of the pictures, the text PROshows up next to the name of the person that posted the picture
一个例子是在Dribbble。当您将鼠标悬停在某些图片上时，发布图片的人的姓名旁边会显示“ PRO”字样
采纳答案by Amin Eshaq
Check out this quick JS FIDDLE.
看看这个快速的JS FIDDLE。
Your HTML
你的 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
css
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
and your javascript
和你的 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.
这应该让您了解如何实现您的目标。显然可以改进。希望能帮助到你。
回答by Lee
maybe something like this http://jsfiddle.net/konglie/SXFEn/
回答by Vivek
give your text inside a div and then show that div on hover of image like this..
将你的文本放在一个 div 中，然后在图像悬停时显示该 div 像这样..
<div id="div">Hiiii</div>
$('#img').live('mouseover', function(){
$('#div').show();
});
回答by AmGates
Define a function with the argument as the text you want to display on hovering the image. Then in that function you dynamically create a div and place the text within that div and also dynamically position the div according to the mouse pointer position and you can also add css for the div give ur styling effects. Call this function on the mouseover of the image. Hope this helps you.
使用参数定义一个函数作为您想要在悬停图像时显示的文本。然后在该函数中，您动态创建一个 div 并将文本放置在该 div 中，并根据鼠标指针位置动态定位 div，您还可以为 div 添加 css 给您的样式效果。鼠标悬停在图像上时调用此函数。希望这对你有帮助。
回答by munjal
I think you have to use jquery tooltip for that. Below are the links from where you can find the best tooltip plugins.
我认为您必须为此使用 jquery 工具提示。以下是您可以找到最佳工具提示插件的链接。
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
http://slodive.com/web-development/best-jquery-tooltip-plugins/
http://slodive.com/web-development/best-jquery-tooltip-plugins/
回答by daryl
$(function() {
$('.bar').css({opacity:0});
$('.foo').hover(function() {
$('.bar').stop().animate({
opacity: 1
},'fast');
},function() {
$('.bar').stop().animate({
opacity: 0
},'fast');
});
});
