Question

当鼠标移过图像时，我试图在图像的左下角显示一个小框。在框内会有一个指向不同页面的链接。

Here有点类似于我想要的，但是盒子要小一些，而且没有连接到图像的边框。

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

此外，我正在尝试使用的图片right here.

Answer 1

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

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

您可以看到演示HERE。

如果您想在自己的网站上使用它，只需更改<img src />值即可添加多个图片和字幕，只需复制我使用的格式：使用class="hover"插入图片，使用{插入p {1}}

Answer 2

以下是使用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

Answer 3

使用:hover::before伪类

.round-pic2:hover::before{
    content: 'text';
    position: relative;
    top: 60px;
    left: 50px;
    width: 30px;
    height: 20px;
    text-align: center;
    display: inline-block;
}

JSFiddle

Answer 4

如果将来您走得更远，可以立即在div标签上使用title属性来提供工具提示：

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

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

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

Answer 5

对于未来的人们，您现在可以完全在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>

图像鼠标悬停上的文字？

5 个答案: