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

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

现在，当h3标记悬停在a标记上时，a被放置在{{1}}标记的顶部。这可以防止悬停工作，从而删除悬停状态。然后，它再次捕捉光标，因为它不再被覆盖 - 继续无限循环。

Answer 3

显示h3时，它会拦截底层元素中的悬停，因此不再悬停。然后不显示h3，底层元素再次悬停，依此类推

组

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

避免它

fiddle

悬停CSS时文字闪烁

3 个答案: