图片鼠标悬停上的文字？答案

【问题标题】：Text on image mouseover?图片鼠标悬停上的文字？
【发布时间】：2012-12-18 10:22:24
【问题描述】：

当鼠标移到图像的左下方时，我试图让一个小框出现在图像的左下方。框内将有一个指向不同页面的链接。

Here 和我想要的有点相似，但是盒子要小一些，并且不连接到图片的边框。

我已经尝试了所有方法，但找不到答案。而且我不想使用工具提示，更不用说我没有任何 javascript 知识这一事实。我真的希望这是 CSS。

我正在尝试使用的图像也可以在right here.找到

【问题讨论】：

标签： css image text mouseover

【解决方案1】：

如果你来自更远的未来，你现在可以在 div 标签上使用 title 属性来提供工具提示：

<div title="Tooltip text">Hover over me</div>

希望您没有使用过去的浏览器。

&lt;div title="Tooltip text"&gt;Hover over me&lt;/div&gt;

【讨论】：

伟大而优雅的解决方案。从悬停文本出现的时间开始会有一秒钟的延迟延迟是否正常？有一点延迟
不幸的是，这种方法依赖于浏览器来显示工具提示并且带有延迟

【解决方案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/" alt="" />
    <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！