IE在悬停时闪烁

时间:2011-09-09 20:06:44

标签: html css

首先请注意,是的,我在论坛上搜索了这个,但它们都与jQuery闪烁相关......

FF和Chrome工作正常...我将鼠标悬停在“.social”链接上闪烁...并且无法在悬停时删除背景...

这只是一个IE错误吗?

我以为要宣布这个班级。“社交”,他们不会继承背景渐变,因为其他链接做... ???

HTML:

<div id="headerWrap">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ACADEMY INFO</a></li>
      <li><a href="#">TRANING VIDEOS</a></li>
      <li><a href="#">ABOUT ALLIANCE</a></li>
      <li><a href="#">BJJ BLOG</a></li>          
      <li><a class="contact" href="#">CONTACT US</a></li>
      <li class="last">
          <a class="social" href="#"><img src="facebook.png"></a>
          <a class="social" href="#"><img src="youtube.png"></a>
          <a class="social" href="#"><img src="twitter-2.png"></a>
      </li>
   </ul>
</div>

CSS:

#headerWrap {
    background: url("../images/separator.png") no-repeat scroll right top transparent;
    margin: 0 auto;
    width: 960px;
}
#headerWrap ul {
    background: url("../images/separator.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    height: 50px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#headerWrap ul li {
    background: url("../images/separator.png") no-repeat scroll right top transparent;
    float: left;
    height: 50px;
}
#headerWrap ul li.last {
    background: none repeat scroll 0 0 transparent;
}
#headerWrap ul li a {
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    height: 35px;
    padding: 15px 20px 0;
    text-decoration: none;
}
#headerWrap ul li a:hover {
    background: -moz-linear-gradient(center top , #CACA5A, #909501) repeat scroll 0 0 transparent;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-weight: bold;
    height: 35px;
    outline: medium none;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#headerWrap ul li a.social {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 15px 10px 0;
    width: 50px;
}

1 个答案:

答案 0 :(得分:1)

试试这个:

#headerWrap ul li a.social,
#headerWrap ul li a.social:hover {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 15px 10px 0;
    width: 50px;
}