Internet Explorer 8 проблемы с CSS ролловером - PullRequest
Новая
       36

Internet Explorer 8 проблемы с CSS ролловером

0 голосов
/ 20 сентября 2011

Последние несколько дней я пытался заставить это меню ролловера 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;
}

1 Ответ

0 голосов
/ 20 сентября 2011

Если вы хотите навести курсор на изображение, когда вы наводите курсор мыши на элемент 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;
}

Вот так я делаю мой ролловер,надеюсь, что это работает для вас.

...