的JavaScript/jQuery的忽视或忽略：hover样式

简述：我想用JS/jQuery来优先于CSS：悬停伪类特定短暂的时刻，而不为其他多数移除CSS规则的情况。由于该站点已经足够脚本，我正试图找到一个解决方案，不需要我加入CSS交互并依靠mouseover/mouseout事件。在我的情况下，两者之间有明显的性能差异。的JavaScript/jQuery的忽视或忽略：hover样式

详情： 我创建了一个基于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);的开头。然而，这似乎是浏览器刷新悬停状态的时间太短，并且在完成渲染之后，悬停重新触发器和购物车仍处于放置状态。

感谢您的任何建议。

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

编辑2：原来我有一个代码错误（oops），而can-not-hover类方法是要走的路。感谢所有评论过的人。

来源

2014-04-24 tbernard

我建议你制作一个JSFiddle，以便我们可以尝试和给你一个解决方案。 – jedison

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

来源

2014-04-24 15:57:27 ckersch

谢谢@ckersch。我已经尝试过，并没有奏效。我只是重新尝试，以确保它不是我的错误。虽然它在JSFiddle中效果很好，但它在实际网站上无法正常工作。据推测这是因为我们臃肿的（Magento）网站和小提琴理想情况之间的渲染时间差异很大。我甚至在1秒延迟后尝试删除noHoverCSS类，仍然没有工作。 – tbernard

查看更新的小提琴。我使用内联css来重写打开/关闭的样式，但是当您想要关闭时，您可以轻松地执行此操作。这个想法是，内联的CSS将胜过样式表，所以你可以使用它来强制下拉关闭，然后删除内联的CSS关闭后恢复默认功能。 – ckersch

实现了我阻止了一些功能。修正并更新小提琴。 – ckersch

所以，你要阻止悬停命令，当你点击它的东西？

你可以创建一个额外的类来监听你的悬停。如果箱子应该打开，额外的班级可以发出信号：

这有点难看，但有诀窍。

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();

来源

2014-04-24 16:07:38 Kai

的JavaScript/jQuery的忽视或忽略：hover样式

回答

相关问题