悬停时文本闪烁 CSS

Question

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

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

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 ... }

Answer 2

当你显示h3时，它正在拦截底层元素中的悬停，所以它不再悬停。然后h3不显示，底层元素再次悬停，依此类推

设置

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

避免它

fiddle

Answer 3

在您的 HTML 中，将 h3 嵌套在 a 中，然后相应地调整您的 CSS。

就像现在一样，当 a 标签悬停时，h3 被放置在 a 标签之上。这可以防止悬停工作，因此悬停状态被删除。然后，它再次拾起悬停的光标，因为它不再被覆盖——继续无限循环。

悬停时文本闪烁 CSS

Text flickers on hover CSS

html

css

hover