html - 悬停 CSS 时文本闪烁

Question

当将鼠标悬停在图像上以提示出现文本时，一旦将鼠标放在上面，文本和横幅就会抖动。如何避免这种情况。

如有任何帮助，我们将不胜感激。

这是示例。 http://jsfiddle.net/a3mcmbby/

HTML:

<div id="container-content">
   <div id="design-background">
   </div>
   <div id="content">
      <div id="table-content">
         <table align="center">
            <tbody>
               <tr>
                  <td colspan="2" valign="bottom" style="font-family:ralewayregular; color: rgb(37,37,37); font-size: 110%; line-height: 150%;">
                  </td>
                  <td><a href="/events/default/view/"><img src="/images/layout/layoutImg6.png" alt="" width="310" height="182"></a>
                  </td>
               </tr>
               <tr>
                  <td>
                     <a href="/events/default/view/"><img src="/images/layout/layoutImg4.jpg" alt="" width="304" height="194"></a>
                     <h3>EXAMPLE</h3>
                  </td>
                  <td rowspan="2">
                     <a href="/events/default/view/"><img src="/images/layout/layoutImg5.jpg" alt="" width="311" height="406"></a>
                     <h3>EXAMPLE</h3>
                  </td>
                  <td>
                     <a href="/events/default/view/"><img src="/images/layout/layoutImg1.jpg" alt="" width="308" height="195"></a>
                     <h3>EXAMPLE</h3>
                  </td>
               </tr>
               <tr>
                  <td>
                     <a href="/events/default/view/"><img src="/images/layout/layoutImg3.jpg" alt="" width="304" height="195"></a>
                     <h3>EXAMPLE</h3>
                  </td>
                  <td>
                     <a href="/events/default/view/"><img src="/images/layout/layoutImg2.jpg" alt="" width="308" height="195"></a>
                     <h3>EXAMPLE</h3>
                  </td>
               </tr>
               <tr>
                  <td colspan="3" style="text-align:center; font-family: Semibold; color: rgb(165,97,11); font-size:300%;">Serving St. Catharines and Niagara Region</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

CSS:

#container-content{
    position:relative;
     margin: 0 auto;
     width:100%;
     min-height:700px;         
     background-color:#FFF;
}

#design-background{
    position:absolute;
    height:350px;    
    top:50%;
    left:0px;
    right:0px;    
    margin-top: -145px;    
    background: url('../images/background-dec.jpg');    
}

#content{     
    position:relative;    
    margin: 0 auto;
    left:0;
    right:0;
    width:980px;

}

#table-content{
    position:absolute;
    margin-top:-30px;
}

#table-content table tr td{
    position: relative;
    padding:8px;
}

#table-content table tr td h3{
    display:none;
}

#table-content table tr td a:hover + h3{
    color:#FFF;
    display:block;
    position: absolute;       
    z-index:10;    
    margin: auto;
    top:0;
    bottom:0;
    left:8px;
    right:10px;              
    font-family: ralewayregular;
    height:50px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    padding-top:25px;
    font-size: 200%;

}

http://jsfiddle.net/a3mcmbby/

Answer 1

试试这个

#table-content table tr td:hover h3{ #do something ... }