JQuery .show().hide() 不让 CSS 悬停代码工作答案

【问题标题】：JQuery .show().hide() not leaving CSS hover code workingJQuery .show().hide() 不让 CSS 悬停代码工作
【发布时间】：2014-04-16 14:03:32
【问题描述】：

在这个jsFiddle 中，尽管 jQuery 文档说 .show() 将 CSS 属性恢复为原来的样子，但一旦调用了 .show(x).delay(x).hide(x)，CSS 就会悬停代码停止工作：

Javascript：

$('.product').on('click', function(){
    $('.drawer').html("Something in your basket")
        .show(200).delay(500).hide(200);
});

CSS：

.drawer {
    border: 1px solid black;
    padding: 10px;
    position: absolute;
    top: 20px;
    left: 0px;
    display: none;
    width: 200px;
} 
.basket {
    position: relative;
}
.basket:hover .drawer {
    display: block;
}

HTML：

<div class="basket">
    <a href="#">Basket</a>
    <div class="drawer">No items in your basket</div>
</div>
<br/><br/><br/><br/><br/><br/>
<a href="#" class="product">Add X to basket</a>

这里发生了什么？目前我只在 Firefox 中测试过

【问题讨论】：

jQuery 的 .hide() 和 .show() 会将内联 CSS 应用于您的元素，这将覆盖您的样式。一种非常丑陋的处理方法是使用!important，例如.basket:hover .drawer {display: block !important;}
谢谢 - 但遗憾的是这会阻止 jQuery 工作
为什么不直接使用 jQuery 来处理悬停？

标签： jquery css hover show-hide

【解决方案1】：

jQuery 确实说当你调用 .show() 时它会恢复 CSS 属性，但不会恢复 .hide()。

documentation for .hide() 说：

这大致相当于调用 .css("display", "none")，只是 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复为其初始值。

如果你先.hide()和元素然后.show()它，jQuery将尝试恢复元素的原始显示值。但是，在您的情况下，您按.show(x).delay(x).hide(x) 的顺序调用，.hide() 是最后一个调用的函数，它不会恢复任何值，而只是在元素上应用.css("display", "none")（并保存一个值以防您调用.show()之后）。顺序很重要。

因此在这种情况下，您应该使用完整的回调函数来移除显示属性。

$('.product').on('click', function(){
    $('.drawer').html("Something in your basket")
        .show(200).delay(500).hide(200, function() {
            $(this).css("display", "");
        });
});

还有it should work fine now。

【讨论】：