<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 在 cmets 中所说，您可以将 p 标签留在原处并执行

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

但你还需要做一些类似的事情

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

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

p.name {
  display:none;
}

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