悬停时在图像上显示文本[重复]

Question

当鼠标悬停图像时，我将如何输入Click to edit，我可以进行悬停，但悬停时无法插入文本。我在 jsfiddle 创建了我的作品，我必须使用 HTML 源代码，尤其是 div 类，否则我的设计将无法正常工作。

这是 HTML 源代码

<a href="#changepic" data-toggle="modal" data-backdrop="static">
<div class="round-pic2 thumbnail" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');">
</div>
</a>

这是 CSS 样式

.round-pic2 {
display: block;
width: 130px;
height: 130px;
margin: 0em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border: 0px solid gray;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

.round-pic2:hover {
opacity:0.5;
}

演示

http://jsfiddle.net/4LjeL/

更新工作版本

http://jsfiddle.net/4LjeL/2/

Answer 1

如果您希望在该图像中显示真实文本，我添加了一个简单的<span>，其中包含直到悬停才可见的文本。

检查这个小提琴：http://jsfiddle.net/4LjeL/5/

Answer 2

您可以使用以下内容：http://jsfiddle.net/TfQ3S/

基本上，我在div 中添加了文本，并将常规文本设置为透明（即你看不到它）。在hover 上，您可以更改文本的颜色以使其显示。

Answer 3

有两种方法可以实现它。

您可以使用css 来执行此操作。您已经使用 css 获得了许多答案。

另一种选择是使用 Jquery 代码。下面的代码解释了如何在你的代码中使用它

你只需要像这样使用jquery的mouseover和mouseout

$('#imgdiv').mouseover(function() {
  $('#title').text("click to edit");
});

$('#imgdiv').mouseout(function() {
  $('#title').text("");
}); 

imgdiv 是 div 的 id。因为你不能在类名之间有空格。把标签放在你想要的地方。

也将其添加到您的 html 的头部

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Demo

Answer 4

只需在<div>标签中插入一个属性title，如下图：

<div class="round-pic2 thumbnail" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');" title='Click to edit'>

如果您想要像@krishna 建议的那样的输出，您所要做的就是：

在<div> 中添加<span> 标签。在<span> 标记中键入所需的文本，在这种情况下单击以编辑，在<span> 标记中按以下方式：

    <div class="round-pic2 thumbnail" style="background-image: 
url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');">
        <span>Click to edit</span>
    </div>

按以下方式添加visibility 属性：

.round-pic2 span {
    visibility: hidden;
}

.round-pic2:hover span {
    visibility: visible;
}

使用margin、padding、position 属性将文本放置在您想要的任何位置。