Fab*_*bio 45
这是:hover在CSS3中使用伪元素.
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
在这里演示.
这是使用jquery实现相同结果的一种方法:
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>?
CSS:
#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
jquery代码:
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
你可以把你想要的jQuery代码,在身体的HTML页面,那么你需要包括在jQuery库头是这样的:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
你可以在这里看到演示.
当你想在你的网站上使用它时,只需更改<img src />值,你就可以添加多个图像和标题,只需复制我使用的格式:插入图像class="hover"和p与class="text"
3dg*_*goo 18
这是使用css执行此操作的一种方法
HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" alt="" />
<a href="http://google.com" class="cornerLink">Link</a>
</div>?
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;
}
或者,如果你只是想在左下角:
如果您来自更远的未来，您现在可以使用 div 标签上的 title 属性来提供工具提示：
<div title="Tooltip text">Hover over me</div>
希望您没有使用过去的浏览器。
<div title="Tooltip text">Hover over me</div>