一段时间后，下拉选项以浅色显示答案

【问题标题】：Dropdown options show in light color after some time一段时间后，下拉选项以浅色显示
【发布时间】：2016-06-08 09:20:52
【问题描述】：

如果您访问here，在右上角，我们可以看到र - INR.

一旦我们将鼠标悬停在它上面，它将以正常颜色显示选项。没关系。

如果你把鼠标移开并再次悬停一段时间，如果你不断重复这个，

它将以浅色显示选项：

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

jQuery(document).ready(function () {
        jQuery('#select-language li').hover(function() {
            jQuery(this).children('ul').stop(true, false, true).fadeToggle(300);
        });
    });

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*/
}

【问题讨论】：

我会说你的 jQuery 淡化效果会导致这个错误。如果可见，则应将不透明度设置为 1。
@Jurik 你是说要把fadeToggle(300); 改成fadeToggle(1);
否 - fadeToggle(300) 表示它在 300 毫秒内切换。我猜@Gaurav 的回答可能不错。

标签： javascript jquery html css magento

【解决方案1】：

看看发生了什么，当你将鼠标悬停在它上面时，你的函数运行并且谁在使用fadeToggle(300)，这会减慢函数的速度。因此，如果您将鼠标悬停在元素上并在一段时间后轻轻将其移除，则不会出现此错误。

但你不应该强制使用这样做，因此你应该尝试使用这个

jQuery(document).ready(function () {
    jQuery('#select-language li').hover(function() {
        jQuery(this).children('ul').fadeIn();
    }, function(){
        jQuery(this).children('ul').fadeOut();
    });
});

【讨论】：

【解决方案2】：

我认为您必须以这种方式更改此行：

jQuery(this).children('ul').stop(true, true).fadeToggle(300);

【讨论】：