Question

在https://dl.dropbox.com/u/4088146/seans/index.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;}

Answer 1

您需要有一个兄弟选择器~，+

更新

检查此http://jsfiddle.net/btevfik/PAvDJ/

这是另一个例子

http://jsfiddle.net/btevfik/nJSMg/

将来小提琴变得疯狂

HTML

<div class="section">
<img src="http://placekitten.com/100/100" />
<div class="description">HELLO</div>
<img src="http://placekitten.com/100/100" />
<div class="description">WORLD</div>
</div>

CSS

.description {
opacity: 0;
}
img:hover + .description {
opacity:1;
}

Answer 2

问题是没有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>

你应该有这个：

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

当您将鼠标悬停在特定项目图像上时，尝试显示说明文字

2 个答案: