首先请注意,是的,我在论坛上搜索了这个,但它们都与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;
}
答案 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;
}