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

javascript/jquery ignore or override :hover style

本文关键字：覆盖 悬停 样式 jquery javascript      更新时间：2023-09-26

简短描述：我想在特定的短暂时刻使用JS/JQuery优先于CSS:hover psuedo类，而不删除其他大多数情况下的CSS规则。由于这个网站的脚本已经足够重了，我正在努力寻找一个不需要我破坏CSS交互和依赖mouseover/mouseout事件的解决方案。就我而言，两者在性能上有明显的差异。

详细信息：我创建了一个基于CSS的下拉式购物车查看器。我安装了一些JQuery，以便在用户触发某些页面交互（如向购物车添加项目）时强制打开购物车。当购物车"以编程方式打开"时，会使用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);添加到它的末尾。然而，对于浏览器来说，这似乎是一个太短的超时时间，无法刷新其悬停状态，并且在渲染完成之前，悬停会重新触发，购物车会保持原位

谢谢你的建议。

编辑：谢谢杰迪森。以下是JSFiddle：http://jsfiddle.net/WJS3h/。还修复了示例中的一些错误。

编辑2:原来我有一个代码错误（oops），不能悬停类方法是可行的。感谢所有发表评论的人。

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

类似这样的东西：

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

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

您也可以在closeMinicart完成后延迟移除它，这样用户就有一些时间在不触发悬停的情况下移开鼠标。

编辑二：

您可以做的另一件事是利用inline.css胜过样式表中的.css这一事实。与其使用css类（open）设置display: block，不如内联设置。类似地，当您退出时，将css设置为display : none以强制隐藏下拉列表，然后在超时后，将css设为display : ''以恢复默认的悬停行为。

这是一个更新的fiddle：fiddle

所以你想要在点击悬停命令时阻止它的东西吗？

当你悬停时，你可以创建一个额外的类来监听。额外的类可以发出是否应该打开盒子的信号：

它有点丑，但很管用。

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();
相关文章：