0

我一直试图让这个CSS滚动菜单在过去几天在Internet Explorer 8中工作。它不起作用。它甚至没有活动链接。有时我可以看到悬停在后台的图像。请帮忙。Internet Explorer 8与CSS滚动问题

下面是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; 
} 

回答

0

如果你想翻转图像时,您将鼠标放在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; 
} 

这就是我如何做我的翻车,希望它适合你。

+0

谢谢,但它不工作。 :( 你有另一种方式吗? –

+0

它不能在IE8下工作,或者它不能在所有浏览器中工作?鼠标悬停后会发生什么? – Cygnusx1

+0

它只在IE8下工作,它甚至不显示悬停。 –