鼠标悬停在图像上的文字? [英] Text on image mouseover?
问题描述
当鼠标移到图像上时，我试图让一个小框出现在图像的左下角.在盒子里面会有一个指向不同页面的链接.
这里 和我想要的有点相似，但是盒子要小一些，没有连接到图片的边框.
我已经尝试了所有方法，但找不到答案.而且我不想使用工具提示，更不用说我没有任何 javascript 知识的事实.我真的希望这是 CSS.
还可以在就在此处找到我尝试使用的图像.
这是使用 CSS3 中的 :hover 伪元素.
HTML:
<img src="http://placehold.it/300x200" class="hover"/><p class="text">text</p></div>CSS:
#wrapper .text {位置:相对；底部:30px；左:0像素；可见性:隐藏；}#wrapper:hover .text {可见性:可见；}
Demo 这里.
<小时>这是一种使用 jquery 实现相同结果的方法:
HTML:
<img src="http://placehold.it/300x200" class="hover"/><p class="text">text</p></div>CSS:
#wrapper p {位置:相对；底部:30px；左:0像素；可见性:隐藏；}
jquery 代码:
$('.hover').mouseover(function() {$('.text').css("visibility","visible");});$('.hover').mouseout(function() {$('.text').css("可见性","隐藏");});
你可以把jquery代码放在你想要的地方，在HTML页面的body中，然后你需要像这样在head中包含jquery库:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
您可以在此处查看演示.
当您想在您的网站上使用它时，只需更改 <img src/> 值，您就可以添加多个图像和标题，只需复制我使用的格式:插入图像class="hover" 和带有 class="text"
的 pI 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.
Here is 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.
Also the images I'm trying to work with can be found right here.
解决方案 This is using the :hover pseudoelement in 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;
}
Demo HERE.
This instead is a way of achieving the same result by using 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 code:
$('.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 body of the HTML page, then you need to include the jquery library in the head like this:
<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"
这篇关于鼠标悬停在图像上的文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
