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

只需在title标记中插入属性<div>，如下所示：

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

如果您想要像@krishna建议的输出，您只需要这样做：

在<span>中添加<div>标记。在<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属性将文字放在任意位置。

Answer 2

如果您希望在该图片中显示真实文字，我添加了一个简单的<span>，其中的文字在悬停之前不可见。

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

Answer 3

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

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

Answer 4

有两种方法可以实现它。

您可以使用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

悬停时在图像上显示文本

4 个答案: