Javascript 下拉选项在一段时间后以浅色显示
如果您访问,在右上角,我们可以看到Javascript 下拉选项在一段时间后以浅色显示,javascript,jquery,html,css,magento,Javascript,Jquery,Html,Css,Magento,如果您访问,在右上角,我们可以看到र - 印度卢比。 一旦我们在上面悬停,它将以正常颜色显示选项。那很好 如果你把鼠标拿开,再停几次,如果你有时重复这个动作 然后将以浅色显示选项: phtml <div class="form-language"> <ul id="select-language" title="<?php echo $this->__('Currency') ?>" class="dropDownMenu">
र - 印度卢比。
一旦我们在上面悬停,它将以正常颜色显示选项。那很好
如果你把鼠标拿开,再停几次,如果你有时重复这个动作
然后将以浅色显示选项:
phtml
<div class="form-language">
<ul id="select-language" title="<?php echo $this->__('Currency') ?>" class="dropDownMenu">
<li><a href=""><?php echo $selCurrency ?></a>
<ul>
<?php echo $lis ?>
</ul>
</li>
</ul>
</div>
<?php endif; ?>
css
.menuBackground {
background: brown;
text-align: center;
}
.dropDownMenu a {
color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropDownMenu li {
position: relative;
width: 120px;
text-align:left;
}
.dropDownMenu a {
padding: 10px 20px;
display: block;
text-decoration: none;
}
.dropDownMenu a:first-child {
color: #000;
font-weight:bold;
}
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
margin-left: 0;
}
.dropDownMenu ul {
box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
text-align: left;
display: none;
background: #FFFFFF;
position: absolute;
top: 100%;
left: 0;
width: 120px;
z-index: 999999;
}
.dropDownMenu li a:hover {
background: #ff7704; /*Your color*/
color: #000; /*Your color*/
}
当您将鼠标悬停在其上时,您的函数将运行,谁在使用fadeToggle(300),这会减慢函数的运行速度。因此,如果您将鼠标悬停在元素上,然后在一段时间后轻轻地将其删除,则不会出现此错误 但是您不应该强制使用它,因此您应该尝试使用它
jQuery(document).ready(function () {
jQuery('#select-language li').hover(function() {
jQuery(this).children('ul').fadeIn();
}, function(){
jQuery(this).children('ul').fadeOut();
});
});
我认为你必须这样改变这一行:
jQuery(this).children('ul').stop(true, true).fadeToggle(300);
我认为jQuery的淡入淡出效果导致了这个bug。如果不透明度可见,则应将其设置为1。@Jurik您是在告诉更改
fadeToggle(300)代码>到<代码>淡入淡出切换(1)代码>否-衰减切换(300)
表示它在300毫秒内切换。我想@Gaurav的答案可能是好的。
jQuery(this).children('ul').stop(true, true).fadeToggle(300);