Question

我正在尝试在图片上显示文字，但是，它似乎无法正常工作。实时预览：http://vexato.com滚动到“投资组合”部分，如果您将第一张图像悬停，则不会显示文本。但是，在调试之后，我注意到它确实显示了它，但它是不可见的。我该如何解决这个问题？

特定于此问题的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<强>问题：

您当前的代码是后代选择器，仅当.project-info是.project-item

的孩子时才有效

<强>解决方案：

您需要使用+运算符选择同级元素。

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

Answer 2

.project-info的不透明度设置为0，悬停更改为1。

在图像上显示文本

2 个答案: