图像鼠标悬停文字？ [英] 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屋！
