我试图让一个小盒子在鼠标移动到图片的左下方时出现。在这个盒子里有一个指向不同页面的链接。
Here与我想要的有些相似,但盒子要小一些,并且不与图像的边界相连。
我已经尝试了所有的方法,但没有找到答案。而且我不想使用tooltip,更何况我没有任何javascript知识。我真的希望这是CSS。
另外,我想用的图片可以在[这里]找到。(http://silentthemes.tumblr.com)
这是使用CSS3中的:hover
伪元素。
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;
}
演示[这里][1]。
这反而是一种通过使用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>
你可以看到演示[这里][2]。
当你想在你的网站上使用它时,只需改变<img src />
值,你就可以添加多个图片和标题,只需复制我使用的格式:插入图片与class="hover"
和p与class="text"
。
下面是使用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;
}
[演示][1]
或者如果你只想把它放在左下角:
[演示][2]