当鼠标移动到图像的左下方时，我想尝试一个小盒子出现在图像的左下方。在盒子里面会有一个链接到不同的页面。
Here有点类似于我想要的，但盒子要更小，没有连接到图像的边框。
我已经尝试过一切，找不到答案。而且我不想使用工具提示，更不用说我没有任何javascript知识。我真的希望这是CSS。
此外，我想要使用的图像可以在right here.找到
解决方法
这是在CSS3中使用：hover pseudoelement。
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;
}
演示HERE。
这是使用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>
您可以看到演示HERE。
当您想在您的网站上使用它时，只需更改< img src />值，您可以添加多个图像和字幕，只需复制我使用的格式：将图像与class =“hover”插入，p与class =“text”
