问题
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 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?
回答1:
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;
}
来源：https://stackoverflow.com/questions/28189769/hover-disabled-after-waypoint-event