图像鼠标悬停时的文本？

Question

图像鼠标悬停时的文本？

32

当鼠标移动到一幅图片上时，我希望能够在该图片的左下方出现一个小框，框内含有指向另一个页面的链接。这里有一个相似的例子，但我需要更小的框并且不与图片边框相连。我尝试了各种方法都找不到答案，而且我不想使用工具提示，更别说我完全不懂JavaScript。我真的希望能够用CSS实现。此外，我要处理的图片可以在这里找到。

- alex r

4个回答

19

这里有一种使用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;
}

示例

如果您只想将它放在左下角：

示例

- 3dgoo

你可以使用 display: block 和 display: none，而不是透明度。但我更喜欢有一个漂亮的过渡效果。 - 3dgoo

1

是的，没错。这样会有更好的效果。我不知道你可以在悬停时更改另一个元素的属性。我以为只能是同一个元素。 - Fabio

非常感谢！在我正确地使用它之前，我需要稍微尝试一下，但这正是我所需要的！！！感谢3dgoo！ - alex r

6

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

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

希望你没有使用过时的浏览器。

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

- Shiraz

优秀而优雅的解决方案。当鼠标悬停时，出现悬停文本的延迟一秒钟左右是否正常？有一点延迟。 - Vass

1

不幸的是，这种方法依赖于浏览器来显示工具提示，并带有延迟。 - Shiraz

0

对于来自未来的人，现在你可以纯粹使用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>

- Alex Hughes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabio · Accepted Answer

这是在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;
}

演示在这里。

以下是使用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中任何您想要的位置，然后您需要像这样在中引入jQuery库：

您可以将 jQuery 代码放置在 HTML 页面的 body 中任何您想要的位置，然后您需要在 head 中引入 jQuery 库，例如：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

你可以在这里查看演示。

当你想在网站上使用它时，只需更改<img src />的值，然后您可以添加多个图像和标题，只需复制我使用的格式：插入带有class="hover"的图像和带有class="text"的段落。