将鼠标悬停在图像上，显示文本和不透明度更改答案

【问题标题】：Hover over image, display text & opacity change将鼠标悬停在图像上，显示文本和不透明度更改
【发布时间】：2017-04-14 17:00:09
【问题描述】：

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

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

我现在的 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>

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

【问题讨论】：

<span> 元素不能包含像<p> 这样的块级元素。您可能需要重新考虑您的结构。
可能是个愚蠢的问题，但为什么呢？它似乎正在工作。我可能会遇到哪些潜在问题？

标签： html css opacity

【解决方案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>

【讨论】：

完美，成功了！当我有能力时将其标记为答案！

【解决方案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>

【讨论】：

是的，我感觉我弄错了。我实际上一直在尝试在悬停上做一个嵌套属性，但想不出正确的方法。这也行得通，但另一个人先进来了。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：