Question

简短描述：我想使用JS / JQuery优先于CSS：hover psuedo-class用于特定的短暂时刻而不删除其他多数案件。由于该网站已经足够重，我试图找到一个不需要我核对CSS交互并依赖鼠标悬停/鼠标移动事件的解决方案。就我而言，两者之间存在显着的性能差异。

详细信息： 我创建了一个基于CSS的下拉式购物车查看器。当用户触发某些页面交互（例如将项目添加到购物车）时，我操纵了一些JQuery来强制购物车打开。当购物车以＆＃34;以编程方式打开时＃34;一个8秒的计时器用于关闭它。一切正常。 问题：我还想在购物车中添加一个点击处理程序，以便当用户点击它时，无论8秒超时是否已过期，都会显式关闭。然而，当他们点击购物车时 - 按照定义 - 将鼠标悬停在购物车上，踢出：悬停状态并保持关闭状态。有没有办法暂时禁用：悬停规则，然后一旦购物车关闭恢复它。

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:hover #minicart.canhover。然后我将removeClass(canhover)添加到closeMinicart（）的开头，并将setTimeout(function(){jQuery('#minicart').addClass('canhover')},500);添加到它的末尾。然而，似乎浏览器刷新它的悬停状态并且在它完成渲染悬停重新触发并且推车保持放置之前，这个时间太短。

感谢您的任何建议。

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

编辑2：原来我遇到了代码错误（oops），并且可以使用can-not-hover类方法。感谢所有评论的人。

Answer 1

执行此操作的一种方法是添加一个类来阻止悬停，然后在关闭下拉列表时将其删除。然后，您可以在该类的hover伪类上放置一些.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

Answer 2

所以你想要点击它时阻止hover命令的东西？

您可以在悬停时创建一个额外的课程来聆听。如果应该打开盒子，额外的班级可以发出信号：

这有点难看，但有诀窍。

jsfiddle: http://jsfiddle.net/kychan/zH3x5/

//    add listener to minicart.
var anchor = $('.minicart-anchor');
var cart   = $('#minicart');

//    our functions that will be executed on the events.
var close  = function() {
    cart.slideUp(500);
},
    open   = function() {
    //    if it has class 'stayClosed' don't do anything.
    if (cart.hasClass('stayClosed')) return;
    //    else, slide!
    cart.slideDown(500);
};

//    bind to event: hover.
anchor.hover(open, close).click(function () {
    //    add or remove 'stayClosed' class on click.
    if (cart.hasClass('stayClosed'))
    {
        //    don't stay closed when the user clicks again.
        cart.removeClass('stayClosed');

        //    automatically open it again.
        open();
    }
    else
    {
        //    stay closed, even on hover.
        cart.addClass('stayClosed');

        //    automatically close it.
        close();
    }
});

//    initially hide it.
cart.hide();

javascript / jquery忽略或覆盖：悬停样式

2 个答案: