悬停菜单不适用于Firefox和Internet Explorer [英] Hover menu not working with Firefox and Internet explorer

问题描述

嗨
我的共享下拉菜单在Chrome和Opera上正常工作，但在Firefox和Internet Explorer上却不能正常工作，甚至共享的图像都没有出现在这两个浏览器中，有人试图解决这种情况吗?

Hi
my share dropdown menu its working fine with Chrome and Opera but not with Firefox and internet explorer even the image of sharee its not appear in those two browsers, did any one have an idea to fix this case

#menu
{
width:38px;
height:33px;
overflow:hidden;
position:relative;
z-index:3;  

  
float:right;

/* CSS3 transition */
-moz-transition-property: height; /* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-property: height; /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome */
-o-transition-property: height; /* Opera */
-o-transition-duration: 1s;
    top: 2px;
    left: 0px;
}    

#menu:hover
{
height:220px;
}



#menu:hover > #share
{
height:33px;
width:33px;    
background-image: url('../iconsimg/sharee.png);
background-repeat:no-repeat;
}        

#share
{    
height:33px;
width:33px;
background-image: url('../iconsimg/sharee.png');
background-repeat:no-repeat;
cursor:pointer;
float:right;
position:relative;
}    

.ico1
{
height:33px;
width:33px;
float:right;
background-image:url('../iconsimg/fbook.png');
background-repeat:no-repeat;
cursor:pointer;
position:relative;

}

.ico1:hover
{
background-image:url('../iconsimg/fbookhov.png');
background-repeat:no-repeat;

}


.ico3
{
height:33px;
width:33px;
background-image:url(../iconsimg/gplus.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico3:hover
{
background-image: url(../iconsimg/gplushov.png);
background-repeat:no-repeat;
}

.ico4
{
height:33px;
width:33px;
background-image:url(../iconsimg/twitt.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico4:hover
{
background-image:url(../iconsimg/twitthov.png);
background-repeat:no-repeat;
}

<div id="menu">
<div id="share">
</div>

<a href="whatever you want">
<div class="ico1">
</div>
</a>
<a href="whatever you want">
<div class="ico2">
</div>
</a>
<a href="whatever you want">
<div class="ico3">
</div>
</a>
<a href="whatever you want">
<div class="ico4">
</div>
</a>
</div>

推荐答案

您忘记了CSS中的单引号

you forget a single quotation in your css

#menu:hover > #share
{
height:33px;
width:33px;
background-image: url('../iconsimg/sharee.png); // <--- here
background-repeat:no-repeat;
}

background-image: url('../iconsimg/sharee.png');

这篇关于悬停菜单不适用于Firefox和Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！