航点事件后悬停禁用
Hover Disabled after Waypoint Event
我已经设置了 sprite 悬停事件和航路点 Jquery 事件,这些事件根据我的主导航菜单上的 anchor/scroll 更改 css -
jfiddle 示例可以在这里找到: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%'
});
在您点击任何导航之前悬停工作正常,但是一旦您点击一个导航并触发航路点,悬停就会被禁用!
请问我该如何纠正?
这可能是 CSS 特异性问题之一。只需用 !important
装饰即可。这应该可以解决问题:
.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;
}
我已经设置了 sprite 悬停事件和航路点 Jquery 事件,这些事件根据我的主导航菜单上的 anchor/scroll 更改 css -
jfiddle 示例可以在这里找到: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%'
});
在您点击任何导航之前悬停工作正常,但是一旦您点击一个导航并触发航路点,悬停就会被禁用!
请问我该如何纠正?
这可能是 CSS 特异性问题之一。只需用 !important
装饰即可。这应该可以解决问题:
.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;
}