将鼠标悬停在图像上，显示文本和不透明度变化

Question

我正在尝试编写一段代码。希望将鼠标悬停在图像上会改变不透明度，并使其中的一些文本可见。

让图像改变不透明度很容易，但我只是想着要显示导致问题的文本。

我现在的 HTML -

.WhyAGradeNotes {
  display: inline-block;
  margin-left: 150px;
  margin-right: 150px;
  height: 300px;
  width: 250px;
  background-image: url("http://www.placehold.it/250x300");
}

.WhyAGradeNotes p {
  visibility: hidden;
}

.WhyAGradeNotes:hover {
  opacity: 0.5;
  .WhyAGradeNotes p {
    visibility: visible;
  }
}

    <section class = "WhyAGrade">
      <span class = "WhyAGradeNotes"><p>Revision Notes</p></span>
      <span class = "WhyAGradeSample"></span>
    </section>

如您所见，我遇到了困难。我猜它与可见性状态有关，但我不知道如何让它正常工作

Answer 1

试试下面的代码

.WhyAGradeNotes {
 display: inline-block;
 margin-left: 150px;
 margin-right: 150px;
 height: 300px;
 width: 250px;
 background-image: url("http://www.placehold.it/250x300");
}
.WhyAGradeNotes p {
 visibility: hidden;
}
.WhyAGradeNotes:hover {
 opacity: 0.5;
}
.WhyAGradeNotes:hover p {
 visibility: visible;
}

<section class = "WhyAGrade"> 
    <span class = "WhyAGradeNotes">
      <p>Revision Notes</p>
    </span> 
    <span class = "WhyAGradeSample"></span> 
</section>

Answer 2

首先，您在 opacity:0.5; 之后缺少 }。您的 CSS 末尾还有一个额外的 }。除非你使用预处理器，但即使这样你的语法也不正确。

其次，只有当.WhyAGradeNotes悬停时，才需要在p上设置visibility: visible。

.WhyAGradeNotes {
  display: inline-block;
  margin-left: 150px;
  margin-right: 150px;
  height: 300px;
  width: 250px;
  background-image: url("http://www.placehold.it/250x300");
}
.WhyAGradeNotes p {
  visibility: hidden;
}
.WhyAGradeNotes:hover {
  opacity: 0.5;
}
.WhyAGradeNotes:hover p {
  visibility: visible;
}

<section class="WhyAGrade">


  <span class="WhyAGradeNotes"><p>Revision Notes</p></span>
  <span class="WhyAGradeSample"></span>


</section>

Answer 3

对于这种情况可以使用伪类：

.WhyAGradeNotes:hover p。

该代码告诉 .WhyAGradeNotes:hover .WhyAGradeNotes 内的任何 p 何时可见。如果您只想直接显示 p，您可以将其更改为 .WhyAGradeNotes:hover>p

试试这个：

.WhyAGradeNotes
{
display: inline-block;
    margin-left: 150px;
    margin-right: 150px;
    height: 300px; 
 width:250px;
 background-image: url("http://www.placehold.it/250x300");
}

.WhyAGradeNotes p
{
visibility:hidden;
}
.WhyAGradeNotes:hover
{
opacity:0.5;
  }
.WhyAGradeNotes:hover p
{
visibility:visible;
}

<section class = "WhyAGrade">


<span class = "WhyAGradeNotes"><p>Revision Notes</p></span>
<span class = "WhyAGradeSample"></span>


</section>

如需完整列表，请查看此 W3Schools CSS Selector

Answer 4

.WhyAGradeNotes
{
display: inline-block;
    margin-left: 150px;
    margin-right: 150px;
    height: 300px; 
 width:250px;
 background-image: url("http://www.placehold.it/250x300");
}

.WhyAGradeNotes p
{
visibility:hidden;
}
.WhyAGradeNotes:hover p
{
opacity:0.5;

visibility:visible;

}

<section class = "WhyAGrade">


<span class = "WhyAGradeNotes"><p>Revision Notes</p></span>
<span class = "WhyAGradeSample"></span>


</section>

将鼠标悬停在图像上，显示文本和不透明度变化

Hover over image, display text & opacity change

html

css

opacity