当鼠标移到图像上时，我试图让一个小框出现在图像的左下角。框内将有一个指向不同页面的链接。
Here和我想要的有点相似，但是盒子要小一些，并且没有和图片的边框相连。
我已经尝试了所有方法，但找不到答案。而且我不想使用工具提示，更不用说我没有任何 javascript 知识了。我真的希望这是 CSS。
还可以找到我尝试处理的图像 right here.
最佳答案
这是使用 :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;
}
演示 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 页面的 body 中，然后您需要在 head 中包含 jquery 库，如下所示:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
可以看demo HERE .
当您想在您的网站上使用它时，只需更改 <img src />值，您可以添加多个图像和标题，只需复制我使用的格式:插入图像 class="hover"和 p 与 class="text"
关于css - 图像鼠标悬停上的文字？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14149360/