0

要素をトリガーして、ホバー時に非表示の要素を表示したい

HTML

<div class="contents">
   <aside>
     <section class="tumb">
       <a class="placeHoldTumb" href="#"><img src="http://placehold.it/100x100">
       <a class="placeHoldTumb" href="#"><img src="http://placehold.it/100x100">
     </section>
   </aside>
   <div class="hidden">
      <a href="#" class="one" ><img src="http://placehold.it/1000x1000/bada55" width="500px" ></a>
      <a href="#" class="two" ><img src="http://placehold.it/1000x1000/bada55" width="500px" ></a>
   </div>
   <a href="#" class="background" ><img src="http://placehold.it/1000x1000/000000/bada55" width="500px" /></a>
</div><!-- end contents -->

CSS

aside  {
  z-index: 100;
  background: rgba(0, 182, 173, 0.9); 
  width: 230px; 
  position: absolute; }
aside .tumb img { 
  margin: 5px; position: relative; }
.contents img {
  position: absolute; }
.hidden img {  opacity: 0; }

.tumb a:hover ~ .hidden img {
  opacity: 1;
  filter:alpha(opacity=100); /*For IE8*/ }

デモはこちら: http://codepen.io/mvaneijgen/pen/ELBAg

4

1 に答える 1

0

コードで以下のCSSを試してください...動作します

.hidden{ 
opacity:0;
    filter:alpha(opacity=0); 
}
.contents:hover .hidden{
opacity: 1;
    filter:alpha(opacity=100);
}

私はフィドルであなたのコードを試しました...このリンクを参照してください：http://jsfiddle.net/NUBkp/14/

于 2013-01-27T21:32:05.990 に答える