CSS 鼠标悬停在图像上的文字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14149360/
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
Text on image mouseover?
提问by alex r
I am trying to get a small box to appear on the bottom-left side of an image when a mouse moves over it. Inside the box there will be a link to a different page.
当鼠标移过图像时，我试图让一个小框出现在图像的左下角。在盒子里面会有一个指向不同页面的链接。
Hereis somewhat similar to what I want, but the box to be smaller and not connected to the border of the image.
这里和我想要的有点相似，但是框要小一些，并且不连接到图像的边框。
I've tried everything and can't find an answer. And I don't want to use tooltip, let alone the fact that i have no javascript knowledge whatsoever. I really want this to be CSS.
我已经尝试了一切，但找不到答案。而且我不想使用工具提示，更不用说我没有任何 javascript 知识的事实。我真的希望这是 CSS。
Also the images I'm trying to work with can be found right here.
回答by Fabio
This is using the :hoverpseudoelement in CSS3.
这是使用:hoverCSS3 中的伪元素。
HTML:
HTML：
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
CSS:
CSS：
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
?Demo HERE.
？演示在这里。
This instead is a way of achieving the same result by using jquery:
这是通过使用 jquery 实现相同结果的一种方式：
HTML:
HTML：
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
CSS:
CSS：
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
jquery code:
jQuery代码：
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
You can put the jquery code where you want, in the bodyof the HTML page, then you need to include the jquery library in the headlike this:
您可以将 jquery 代码放在您想要的位置，在HTML 页面的正文中，然后您需要像这样在头部包含 jquery 库：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
You can see the demo HERE.
您可以在此处查看演示。
When you want to use it on your website, just change the <img src />value and you can add multiple images and captions, just copy the format i used: insert image with class="hover"and p with class="text"
当您想在您的网站上使用它时，只需更改<img src />值即可添加多个图像和标题，只需复制我使用的格式：插入图像class="hover"和 p 与class="text"
回答by 3dgoo
Here is one way to do this using css
这是使用 css 执行此操作的一种方法
HTML
HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" alt="" />
<a href="http://google.com" class="cornerLink">Link</a>
</div>?
CSS
CSS
.imageWrapper {
position: relative;
width: 300px;
height: 300px;
}
.imageWrapper img {
display: block;
}
.imageWrapper .cornerLink {
opacity: 0;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 2px 0px;
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.imageWrapper:hover .cornerLink {
opacity: 0.8;
}
Or if you just want it in the bottom left corner:
或者，如果您只想要它在左下角：
