航点事件后停用Hover [英] Hover Disabled after Waypoint Event

问题描述

我已经设置了一个精灵悬停事件和航点Jquery事件，它们改变了CSS，这取决于我的主导航菜单中的锚点/滚动条 -

I have set both a sprite hover event and waypoint Jquery events that change the css depending on the anchor/scroll on my main nav menu -

jfiddle示例可以在这里找到： http://jsfiddle.net/LhLpm39p/17/

jfiddle example can be found here: http://jsfiddle.net/LhLpm39p/17/

$('#news').waypoint(function (direction) {
if (direction === 'up') {

    $('#news-menu').css({
        "background-position": "0 0",
            "color": "#fff"
    });


}
}, {
offset: '100%'
}).waypoint(function (direction) {
if (direction === 'down') {

    $('#news-menu').css({
        "background-position": "0 100%",
            "color": "#00a4f0"
    });

}
}, {
offset: '50%'
}).waypoint(function (direction) {
if (direction === 'down') {

    $('#news-menu').css({
        "background-position": "0 0",
            "color": "#fff"
    });

}
}, {
offset: '0%'

});

在您点击任何导航之前，悬停工作正常，但是一旦您点击其中一个并触发悬停的航点变为禁用！

The hover works fine before you click on any of the navs, but once you click on one and trigger the waypoint the hover becomes disabled!

我该如何纠正这个问题？

How do I rectify this please?

推荐答案

这可能是CSS Specificity问题之一。只需用！important 来装饰。这应该解决问题：

This could be one of CSS Specificity issue. Just decorate with !important. This should resolve issue:

.menu:hover {
    background: url("http://www.solidbackgrounds.com/images/two/950x350/950x350-vegas-gold-venetian-red-two-color-background.jpg") 0 100%!important;
color: #00a4f0!important;
}

这篇关于航点事件后停用Hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！