html - 使用纯 css 显示不是锚的子元素的元素

Question

我想触发元素在悬停时显示隐藏元素

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

Answer 1

在您的代码中尝试以下 CSS ......它会工作

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

我已经在 Fiddle 中尝试过您的代码...请参阅此链接：http: //jsfiddle.net/NUBkp/14/