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 に答える