将鼠标悬停在图片上，即可显示文字和图片。不透明度变化

Question

我现在正尝试处理一段代码。希望悬停在图像上会改变不透明度，并使一些文本在其中可见。

让图像改变不透明度很容易，但它只是让我的头脑周围有文本显示导致问题。

目前我的HTML -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如您所见，我遇到了困难。我猜测的是它与可见性状态有关，但我无法弄清楚如何让它正常工作

Answer 1

尝试以下代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您在}之后错过opacity:0.5;。你的CSS末尾还有一个额外的}。除非你使用预处理器，否则你的语法会不正确。

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

＆＃13;

＆＃13;

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

＆＃13;

<section class="WhyAGrade">


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


</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

可以在这种情况下使用伪类：

.WhyAGradeNotes:hover p。

该代码告知.WhyAGradeNotes:hover p内的任何.WhyAGradeNotes何时可见。如果您只想看到直接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

＆＃13;

＆＃13;

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

}

＆＃13;

<section class = "WhyAGrade">


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


</section>

＆＃13;

＆＃13;

＆＃13;