html - <p> 悬停时显示在 img 上

Question

我的代码有问题。

当我悬停自己的图像时，我想显示有关我自己的信息 ( <p> )。 我试图将代码粘贴到 jsfiddle 中，但即使那样也失败了...... 我希望有人可以帮助我处理我的代码。

这是 fiddle

<div class="container pt">
<div class="row mt centered">   
    <div class="col-lg-4">
        <a class="zoom green"><img class="img-responsive" src="http://www.placecage.com/100/100" alt="" /></a>
        <p>Hello iam Name</p> <!-- This P should be hidden and visible when the image is hovered -->
        <p>Name</p>
    </div>
</div>
</div><!-- /row -->

Answer 1

添加这个CSS:

.zoom p {
  display:none;
}

.zoom:hover p {
  display:block;
}

并将该名称段落移动到该 a 标记内:

<a class="zoom green">
  <img class="img-responsive" src="http://www.placecage.com/100/100" alt="" />
  <p>Hello iam Name</p>
</a>

---

编辑: 正如 Mathius 在评论中所说，您可以将 p 标签留在原处并执行

.zoom:hover + p {
  display:block;
}

但是你还需要做类似的事情

.col-lg-4 > p { display:none;} 

然后你会引入一个潜在的问题，因为 - 如果 .col-lg-4 中的第一个 p 标签是你不想要的东西怎么办被隐藏？ 那个 问题可以通过向该名称 p 标签添加一个类并设置 display:none 来解决；在上面，例如:

p.name {
  display:none;
}

有几种方法可以达到预期的效果。考虑到 OP 中提供的信息，我认为第一个示例以最简洁的方式执行此操作。