31

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

这里有点类似于我想要的，但是盒子要小一些并且不连接到图像的边框。

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

我正在尝试使用的图像也可以在这里找到。

4

4 回答 4

48

这是使用:hoverCSS3 中的伪元素。

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 页面的正文中，然后您需要在头部包含 jquery 库，如下所示：

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

你可以在这里看到演示。

当您想在您的网站上使用它时，只需更改<img src />值，您就可以添加多个图像和标题，只需复制我使用的格式：insert image withclass="hover"和 p withclass="text"

于 2013-01-04T00:47:27.740 回答
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;
}

演示

或者，如果您只想将其放在左下角：

演示

于 2013-01-04T00:37:20.350 回答
5

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

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

我们只是希望您没有使用过去的浏览器。

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

于 2020-08-08T13:18:59.403 回答
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>

于 2020-07-06T10:31:15.747 回答