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;
}

这就是我如何进行翻转，希望它适合你。

CSS翻转的Internet Explorer 8问题

1 个答案: