Html 尝试在将鼠标悬停在特定项目图像上时显示说明文本

在上，当您将鼠标悬停在图像上时，我试图显示与公文包图像关联的描述。我试图做到这一点，通过设置不透明度为1时，你在图像悬停

出于某种原因，这是行不通的

.description {
  display: block;
  opacity: 0;
  text-align: left;
  height: 130px;
  padding-top: 50px;
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
}
section img:hover ~ .description {opacity: 1;}

---

您需要有同级选择器

~

，

+

更新

检查这个

这是另一个例子

万一将来小提琴会发疯

HTML

---

问题是没有IMG元素的兄弟元素可供选择

你所拥有的是：

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
  </a>
  <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
</div>

我重新设计了Trulia的iPhone和iPad体验，呈现本地数据和热图，同时改进了核心搜索体验。该项目也是为所有Trulia定义一种新的视觉语言的机会

你应该有这个：

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
    <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
   </a>      
</div>

我在上面的示例中添加了一个兄弟选择器，但仍然没有成功。是的，我正在fiddle上尝试，如果我得到它，我会让你知道的谢谢！当我为img:hover+.description、a:hover+.description{opacity:1；}执行此操作时，效果非常好

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
  </a>
  <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
</div>

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
    <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
   </a>      
</div>