图片鼠标悬停上的文字？
Posted
技术标签:
【中文标题】图片鼠标悬停上的文字？【英文标题】：Text on image mouseover? 【发布时间】：2012-12-18 10:22:24 【问题描述】：当鼠标移到图像的左下方时，我试图让一个小框出现在图像的左下方。框内将有一个指向不同页面的链接。
Here 和我想要的有点相似，但是盒子要小一些，并且不连接到图片的边框。
我已经尝试了所有方法，但找不到答案。而且我不想使用工具提示，更不用说我没有任何 javascript 知识这一事实。我真的希望这是 CSS。
我正在尝试使用的图像也可以在right here.找到
【问题讨论】：
【参考方案1】：如果你来自更远的未来，你现在可以在 div 标签上使用 title 属性来提供工具提示：
<div title="Tooltip text">Hover over me</div>
希望您没有使用过去的浏览器。
<div title="Tooltip text">Hover over me</div>【讨论】：
伟大而优雅的解决方案。从悬停文本出现的时间开始会有一秒钟的延迟延迟是否正常？有一点延迟 不幸的是，这种方法依赖于浏览器来显示工具提示并且带有延迟【参考方案2】：对于来自未来的人们，您现在可以完全在 CSS 中执行此操作。
.tooltip
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin: 5rem;
/* Tooltip text */
.tooltip .tooltiptext
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
position: absolute;
z-index: 1;
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext
visibility: visible;
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>【讨论】：
【参考方案3】：这是在 CSS3 中使用 :hover 伪元素。
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>
你可以看演示HERE。
当您想在您的网站上使用它时，只需更改<img src /> 的值，您就可以添加多个图像和标题，只需复制我使用的格式：用class="hover" 插入图像和用class="text" 插入图像
【讨论】：
谢谢法比奥，这个也可以，但是另一个很简单。当我开始更多地使用javascript时，我会研究这个:) 不客气 :) javascript 类似于 java，您可以从名称中猜到，但更简单。如果你想学习它，我推荐你可以在 codecademy.com 找到的课程。这不是一个无聊的，你必须一边学习一边编码。此外，jquery 是一个 javascript 框架，它可以让您以比使用纯 javascript 更简单的方式编写强大的东西。官方文档做得很好:) @alexr【参考方案4】：这是使用 css 执行此操作的一种方法
HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" />
<a href="http://google.com" class="cornerLink">Link</a>
</div>
CSS
.imageWrapper
position: relative;
width: 300px;
height: 300px;
.imageWrapper img
display: block;
.imageWrapper .cornerLink
opacity: 0;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 2px 0px;
color: #ffffff;
background: #000000;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
.imageWrapper:hover .cornerLink
opacity: 0.8;
Demo
或者如果你只是想要它在左下角：
Demo
【讨论】：
如果您愿意，您可以使用display: block 和display: none 而不是不透明度。不过我更喜欢有好的过渡。
是的，没错。它有更好的效果。我不知道您可以在悬停时更改另一个元素的属性。我也是这么想的。
非常感谢！在我让它正常工作之前我不得不玩一点，但这正是我所需要的！！！谢谢 3dgoo！以上是关于图片鼠标悬停上的文字？的主要内容，如果未能解决你的问题，请参考以下文章