css - CSS 翻转的 Internet Explorer 8 问题

Question

过去几天我一直在尝试让这个 CSS 滚动菜单在 Internet Explorer 8 中工作。它不起作用。它甚至没有事件链接。有时我可以看到翻转图像悬停在背景中。请帮忙。

这是 HTML:

<div class="lastfm"> 
<a href="http://www.last.fm/music/Endast"><img src="images/button5_lastfm.png" alt="ENDAST on Lastfm" name="ENDASTLastfm" width="71" height="32" border="0" id="ENDASTLastfm" /></a>   </div> 

 <div class="myspace">
<a href="http://www.myspace.com/Endast"><img src="images/button4_myspace.png" alt="ENDAST on MySpace" name="ENDASTMySpace" width="71" height="32" border="0" id="ENDASTMySpace" /></a>    </div> 

 <div class="youtube">
<a href="http://www.youtube.com/EndastMusic"><img src="images/button3_youtube.png" alt="ENDAST on YouTube" name="ENDASTYouTube" width="71" height="32" border="0" id="ENDASTYouTube" /></a>    </div>

<div class="twitter">
<a href="http://www.twitter.com/EndastMusic"><img src="images/button2_twitter.png" alt="ENDAST on Twitter" name="ENDASTTwitter" width="71" height="32" border="0" id="ENDASTTwitter"/></a></div>

<div class="facebook">
<a  href="http://www.facebook.com/EndastMusic" ><img src="images/button1_facebook.png" alt="ENDAST on Facebook" name="ENDASTFacebook" width="71" height="32" border="0" id="ENDASTFacebook"/></a>    </div> 

这是 CSS:

.facebook {
    display:block;
    background-image: url(../images/button1_facebook_rollover.png);
    width:71px;
    margin: 0px;
    height: 32px;
    background-repeat: no-repeat;
    float: right;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.facebook a:hover  img {
    visibility: hidden;
}
.facebook a:active img {
    visibility: hidden;
}

.twitter {
    background-image: url(../images/button2_twitter_rollover.png);
    width:71px;
    margin: 0px;
    float: right;
    height: 32px;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.twitter a:hover  img  {
    visibility: hidden;
}
.twitter a:active  img  {
    visibility: hidden;
}

.youtube {
    background-image: url(../images/button3_youtube_rollover.png);
    width:71px;
    margin: 0px;
    background-repeat: no-repeat;
    float: right;
    height: 32px;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.youtube a:hover  img  {
    visibility: hidden;
}
.youtube a:active img  {
    visibility: hidden;
}

.myspace {
    background-image: url(../images/button4_myspace_rollover.png);
    width: 71px;
    margin: 0px;
    background-repeat: no-repeat;
    float: right;
    height: 32px;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.myspace a:hover  img {
    visibility: hidden;
}
.myspace a:active img {
    visibility: hidden;
}

.lastfm {
    background-image: url(../images/button5_lastfm_rollover.png);
    width: 71px;
    margin: 0px;
    background-repeat: no-repeat;
    float: right;
    height: 32px;
    padding-top: 0px;
    padding-right: 190px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.lastfm a:hover  img {
    visibility: hidden;
}
.lastfm a:active  img {
    visibility: hidden;
}

Answer 1

如果你想在鼠标悬停在 div 上时滚动图像，你可以这样做:

<a  href="http://www.facebook.com/EndastMusic" >    
    <div class="facebook">
    </div>
</a>

CSS:

.facebook {
    display:block;
    background-image: url(images/button1_facebook.png);
    width:71px;
    margin: 0px;
    height: 32px;
    background-repeat: no-repeat;
    float: right;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.facebook:hover{
    display:block;
    background-image: url(images/button1_facebook_rollover.png);
    width:71px;
    margin: 0px;
    height: 32px;
    background-repeat: no-repeat;
    float: right;
    padding-top: 0px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 0px;
}

这就是我的翻转方式，希望它对你有用。