图像鼠标悬停文字? [英] Text on image mouseover?
问题描述
当鼠标移动到图片的左下角时,我想要一个小方框出现在图片的左下角。
I 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.
我试过了一切,找到答案。我不想使用工具提示,更不用说,我没有任何javascript知识的事实。我真的希望这是CSS。
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.
推荐答案
这是使用:hover
pseudoelement in CSS3。
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: p>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
这是一种通过使用jquery实现相同结果的方法:
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: P>
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");
});
您可以在正文 HTML页面,那么您需要在头中加入jquery库,如下所示:
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>
当您要在网站上使用它时,只需更改< img src /
值,您可以添加多个图片和字幕,只需复制我使用的格式:插入图像与 class =hover
c $ c> class =text
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屋!