javascript/jquery 忽略或覆盖 :hover style

Question

简短说明:我想使用 JS/JQuery 优先于 CSS :hover psuedo-class 用于特定的短暂时刻，而不删除其他 多数 个案。由于该网站的脚本已经足够多了，我正在尝试找到一种不需要我破坏 CSS 交互并依赖鼠标悬停/鼠标移出事件的解决方案。就我而言，两者之间存在显着的性能差异。

详细信息:我创建了一个基于 CSS 的下拉购物车查看器。我安装了一些 JQuery 以在用户触发某些页面交互(例如将商品添加到购物车)时强制打开购物车。当购物车“以编程方式打开”时，使用 8 秒计时器将其关闭。所有的工作。 问题:我还想向购物车添加一个点击处理程序，这样当用户点击它时，无论 8 秒超时是否已过期，它都会被明确关闭。然而，当他们点击购物车时，根据定义，他们将鼠标悬停在购物车上，进入 :hover 状态并阻止其关闭。有没有办法暂时禁用 :hover 规则，然后在购物车关闭后恢复它。

HTML:

<span class="minicart-wrapper">
    <a class="minicart-anchor" href="...">Shopping Cart</a>
    <div id="minicart">
        ...
    </div>
</span>

CSS:

.minicart-wrapper #minicart { display: none; }
.minicart-wrapper:hover #minicart,
.minicart-wrapper #minicart.open { display: block; }

JQuery:

function openMinicart() {
    var minicart = jQuery('#minicart');
    minicart.addClass('open');
    minicart.bind('click', {}, closeMinicart);
    window.setTimeout(closeMinicart, 8000);
}

function closeMinicart() {
    var minicart = jQuery('#minicart');
    minicart.removeClass('open');
    minicart.unbind('click', closeMinicart);
}

我已经尝试过:我在这里找到了一些建议，例如将 .minicart-wrapper:hover #minicart 更改为 .minicart-wrapper:悬停#minicart.canhover。然后，我将 removeClass(canhover) 添加到 closeMinicart() 和 setTimeout(function(){jQuery('#minicart').addClass('canhover')},500) 的开头； 到最后。然而，对于浏览器刷新其悬停状态以及在完成渲染悬停重新触发和购物车保持原位之前，这似乎是一个超时时间太短。

感谢您的任何建议。

编辑:感谢 Jedison。这是 JSFiddle:http://jsfiddle.net/WJS3h/ .还修复了示例中的一些错误。

编辑 2: 原来我有一个代码错误(糟糕)，can-not-hover 类方法是可行的方法。感谢所有发表评论的人。

Answer 1

实现此目的的一种方法是添加一个类来阻止悬停，然后在您关闭下拉菜单时将其删除。然后，您可以将一些 .css 放在该类的悬停伪类上，以阻止悬停类。

像这样:

#minicart {display: 'none'}
#minicart:hover {display: 'block'}
#minicart.noHoverCss:hover {display: ''}

将 noHoverCss 添加到 openMinicart 中的购物车，并在 closeMinicart 中将其删除。

您也可以在 closeMinicart 完成后延迟一段时间将其删除，这样用户就有时间将鼠标移开而不会触发悬停。

编辑二:

您可以做的另一件事是利用内联 .css 胜过样式表中的 .css 这一事实。不要使用 css 类 (open) 来设置 display:block，而是内联。同样，当您退出时，将 css 设置为 display : none 以强制隐藏下拉菜单，然后在超时后将 css 设置为 display : '' 以恢复您的默认悬停行为。

这是一个更新的 fiddle :fiddle