使用CSS悬停时隐藏段落内容

Question

我有这段代码：

HTML

  <div class="image1">
        <p class="aaa">
            <h3>asdas</h3>asdsadas
        </p>
    </div>

CSS

.image1{
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left:auto;
  vertical-align:top;

}

.image1 p{ visibility: hidden;}
.image1 p:hover{ visibility: visible;}

链接到fiddle

如何隐藏"aaa"部分并使其仅在悬停时可见？ 这段代码有什么问题？

Answer 1

您的代码无效，因为您的h3代码中包含p标记且该代码无效。您始终可以使用Markup Validation Service检查您的代码。

您可以删除h3标记，它会起作用。

还要更改CSS：

.image1 p {visibility: hidden;}
.image1:hover p {visibility: visible;}

请参阅 Example 。