html - 在图像上显示文本

Question

我正在尝试在图像上显示文本，但是它似乎不起作用。实时预览:http://vexato.com滚动到投资组合部分，如果您将鼠标悬停在第一张图片上，它将不会显示文本。但是，经过调试，我发现它确实显示了它，但它是不可见的。我该如何解决？

针对此问题的代码:

.portfolio {
  background: #f9f9f9;
}
.project-item {
  width: 25%;
  height: auto;
  float: left;
  cursor: pointer;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  transition: all 0.3s ease;
}
.project-info {
  position: absolute;
  opacity: 0;
}
.project-item:hover {
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
  transition: all 0.3s ease;
}
.project-item:hover .project-info {
  opacity: 1;
}
#portfolio-projects {
  list-style: none;
  width: 100%;
  height: auto;
  overflow: auto;
}
#portfolio-projects li {
  position: relative;
}

<ul id="portfolio-projects">
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
    <div class="project-info">
      <h5>Project Name</h5>
      <p>Click here to view.</p>
    </div>
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
  <li>
    <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" />
  </li>
</ul>

Answer 1

问题:

您当前的代码是后代选择器，仅当 .project-info 是 .project-item 的子项时才有效

解决方案:

您需要使用+ 运算符来选择兄弟元素。

.project-item:hover + .project-info {
    opacity: 1;
}