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

我有以下代码：

的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"部分并使之仅在悬停时可见？
此代码有什么问题？

最佳答案

您的代码无效，因为您在h3标记内有一个p标记，并且该标记无效。您始终可以使用Markup Validation Service来检查代码。

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

同时更改CSS：

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

请参见Example。

关于html - 使用CSS在悬停时隐藏段落内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29133832/