闪烁在画廊中悬停

Question

我在画廊（html + css）中闪烁悬停的问题。我找不到解决方案。任何人都可以帮我修复它吗？

Code on jsfiddle.com

HTML: 
<div id="gallery"> 
      <div class="col-sm-6 photo-1"> 
       <div class="transparent-gallery"> 
        <h3>Photo Caption</h3> 
        <p>Donec sodales semper porttitor.</p> 
       </div> 
      </div> 
</div> 

CSS: 
      #gallery .photo-1{ 
      background-image:url(http://img2.wikia.nocookie.net/__cb20130326013809/camp-dublin-roleplay/images/e/ec/Camden-town.jpg); 
      background-size: cover; 
      height:300px; 
     } 

     .transparent-gallery{ 
      background: rgba(36, 43, 46, 0.8); 
      background-size: cover; 
      height:300px; 
      width:100%; 
      position:absolute; 
      text-align: center; 
     } 

     .transparent-gallery h3, .transparent-gallery p{ 
      visibility:hidden; 
     } 

     .transparent-gallery:hover h3, .transparent-gallery:hover p{ 
      visibility:inherit; 
     } 

     .transparent-gallery:hover{ 
      background: rgba(36, 43, 46, 0.95); 
      height:110px; 
      top:200px; 
     } 

我是初学者，这个代码肯定会得到更好的...

Answer 1

这些属性应该设置这样反而

#gallery:hover .transparent-gallery h3, #gallery:hover .transparent-gallery p{ 
    visibility:inherit; 
} 

#gallery:hover .transparent-gallery{ 
    background: rgba(36, 43, 46, 0.95); 
    height:110px; 
    top:200px; 
} 

Example here

这样，基本上我们是在告诉代码来做到这一点：

当#gallery:hover显示此=>.transparent-gallery