Javascript 当悬停在基础jQuery菜单上(没有DoPrdNoS)时出现白色补丁 我使用基础顶部条来创建菜单。所有元素都没有下拉列表。但如果我将鼠标悬停在某个项目上,它会留下一个白色补丁,如下所示:
这只发生在谷歌浏览器上。在Firefox中试用时,效果很好!如何摆脱这个补丁 以下是指向live网站的链接: css文件:Javascript 当悬停在基础jQuery菜单上(没有DoPrdNoS)时出现白色补丁 我使用基础顶部条来创建菜单。所有元素都没有下拉列表。但如果我将鼠标悬停在某个项目上,它会留下一个白色补丁,如下所示:,javascript,jquery,zurb-foundation,Javascript,Jquery,Zurb Foundation,这只发生在谷歌浏览器上。在Firefox中试用时,效果很好!如何摆脱这个补丁 以下是指向live网站的链接: css文件: @import "compass"; $top-bar-color: rgba(17, 17, 17, 0.2); body{ font-family: 'Comfortaa', cursive !important; } .top-bar-section{ a{ font-
@import "compass";
$top-bar-color: rgba(17, 17, 17, 0.2);
body{
font-family: 'Comfortaa', cursive !important;
}
.top-bar-section{
a{
font-family: 'Comfortaa', cursive !important;
background: transparent !important;
@include transition-property(all);
@include transition-duration(0.3s);
@include transition-timing-function(ease-in);
&:hover{
background: none repeat scroll 0 0 rgba(17, 17, 17, 0.2) !important;
@include border-radius(50px);
color: #ffffff !important;
}
}
}
.top-bar{
z-index: 10 !important;
-moz-animation-duration: 1.8s;
-webkit-animation-duration: 1.8s;
-o-animation-duration: 1.8s;
-ms-animation-duration: 1.8s;
animation-duration: 1.8s;
li{
background: transparent !important;
}
}
#title{
float: left;
margin-left: -1000000000000000px;
}
#homeTop{
height: 65%;
background-image: image-url("leafyhomebg.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
z-index: -1 !important;
}
#home{
overflow: hidden;
height: 100%;
background-image: image-url("homebg.jpg");
}
.fixed-custom{
position:fixed;
z-index: 99;
width:100%;
}
#leafLogo{
display: block;
height: 24%;
margin-left: auto;
margin-right: auto;
margin-top: 8%;
}
.hiMsg{
color: #e9e9e9;
font-size: 242%;
font-size: 2vw;
font-weight: 100;
margin-top: 2%;
text-align: center;
&.lineTwo{
margin-top: -28px;
margin-top: 2.8%;
}
.emTxt{
color: #b3b3b3;
}
}
.sImgCont{
width: 20%;
float: left;
.sImg{
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 2px #828282;
display: block;
margin-left: auto;
margin-right: auto;
opacity: 0.7 !important;
width: 43%;
}
}
.sImgWrap{
margin-top: 1%;
}
PS:我认为这与链接有关。。。再次转到链接并刷新。。。看见我在底部添加了一些链接,当我们将它们悬停时,又会出现一个大补丁 我终于找到了问题所在。在这段代码中:
#title{
float: left;
margin-left: -1000000000000000px;
}
当我移除浮子时,一切都恢复正常。所以我用这个位置替换了float:fixed代码>现在一切正常
感谢每一位试图帮助我们的人 我的版本chrome(linux mint)不会出现这种情况,因为它看不到白色补丁(OSX上的chrome 35),但是在悬停时会变成完全灰色(我想这不是故意的?@arthur.sw发行版是什么?我也在Ubuntu 14的Chrome中。04@EApubs它可能是你的基础变量之一吗?虽然说我在CSS中看不到任何引用背景颜色变化的内容:-/@EApubs似乎是添加它的过渡持续时间?尝试去掉过渡效果?