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;}

然后你会引入一个潜在的问题因为 - 如果p中的第一个.col-lg-4标记是你不想被隐藏的内容怎么办？该问题可以通过在该名称p标记中添加一个类来解决，并设置display：none;就像它一样：

p.name {
  display:none;
}

有几种方法可以达到预期的效果。我认为第一个例子是以最干净的方式做到这一点，考虑到OP中给出的信息。

<p>悬停时的图像</p>

1 个答案: