0

在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;}
4

2 回答 2

2

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

更新

检查这个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;
}
于 2013-03-17T22:22:27.537 回答
0

问题是没有要选择的 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>
于 2013-03-17T23:11:24.137 回答