javascript 如何在图像悬停中显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20036531/
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
How to show text in image hover
提问by user2977338
I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.
我有一些缩略图，我想在悬停时在它们上显示一些文本。我可以在悬停时使它们变暗，但不知道如何添加文本。
example: http://www.lenzflare.com/video-production-portfolio/
示例：http: //www.lenzflare.com/video-production-portfolio/
Here is what I have done:
这是我所做的：
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
回答by sheriffderek
Well I'm going to assume you want this in a list:
好吧，我假设您希望将其列在列表中：
There are a few main concepts here: Relative positioningand how it works with absolute positioning, Source order, and your centeringtechnique.
这里有几个主要概念：相对定位以及它如何与绝对定位、源顺序和居中技术一起工作。
When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.
给位时：相对；对于盒子，你是在说“我现在是边界 - 对于我体内任何绝对定位的东西”（除非它们是相对的，然后像这样） - 所以，你想要淡入的绝对定位的覆盖物- 绝对定位到相关框的一个或多个边缘。（大多数人使用 top: 0; left: 0;） --- 所以绝对框不再在“流”中，而是生活在由相关父级决定的自己的魔法世界中。
Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.
源顺序：您的 html 将在堆叠时自下而上出现。所以你的封面应该在图像下方（按 html 顺序）——你可以使用 z-index——但没有必要这样做。
The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...
负边距在这里并不是真的很棒也不需要。您可以将文本对齐居中。我会做一些测试并在东西周围加上边框，这样你就可以看到它实际发生的事情。另外 - 我鼓励你使用 box-sizing: border-box; 在一切...
Read about: Border box
阅读：边框框
HTML
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
回答by Andreas
you could consider something like this fiddle. I copy my code here:
你可以考虑像这个小提琴这样的东西。我在这里复制我的代码：
=================
==================
HTML
HTML
<a href="/" class="img"
style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');"
onmouseover="this.firstElementChild.style.display='block'" >
<span class='play' onmouseout="this.style.display = 'none'";>
my lovely text here
<span>
</a>
=================
==================
CSS
CSS
a {
min-height:104px;
min-width:184px;
display: inline-block;
overflow: hidden;
position: relative;
}
.play{
display:none;
color:#fff;
height:104px;
width:184px;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
回答by alexP
This works:
这有效：
.pic{
background: url(http://i42.tinypic.com/2v9zuc1.jpg);
width: 200px;
height: 100px;
}
.text{
background: black;
text-align: center;
color: white;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.text:hover{
opacity: 0.8;
}
<div class="pic">
<div class="text">My Text</div>
</div>
回答by Nabbit
Try this: http://jsfiddle.net/JU7zm/
试试这个：http: //jsfiddle.net/JU7zm/
<a href="/">
<div class="play">text</div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a .play {
display: none;
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 184px;
height: 104px;
color: #fff;
}
a:hover .play { display: block; }
回答by Eric
Add some text content to the playelement.
向play元素添加一些文本内容。
<div class="play">Some text</div>
With added css for .play:
为 .play 添加了 css：
color:#fff;
font-size:16px;
回答by acarlon
It sounds like you want to have a tooltip, if so then add a title to the a href:
听起来你想要一个工具提示，如果是这样，那么在 a href 中添加一个标题：
<a href="/" title="This is my text" >
You could also use the tooltip in jQuery UI.
您还可以在 jQuery UI 中使用工具提示。
Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.
否则，您可以使用 javascript onmouseover 或 jQuery 悬停/鼠标输入事件在播放 div 中显示文本。您可能需要确保播放 div 的 z-index 高于 img。
回答by Ansjovis86
Here's a simple JS solution you can insert into your HTML:
这是一个简单的 JS 解决方案，您可以插入到您的 HTML 中：
<script type="text/javascript">
document.getElementById("your_image_id").title = 'your hover text';
</script>
