Hover desactivado después del evento de punto de ruta

He configurado un evento de desplazamiento de sprite y eventos Jquery de waypoint que cambian el css según el ancla / desplazamiento en mi menú de navegación principal –

El ejemplo de jfiddle se puede encontrar aquí: 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%' }); 

El elemento activo funciona bien antes de hacer clic en cualquiera de los botones de navegación, pero una vez que se hace clic en uno y se activa el punto de referencia, el elemento se desactiva.

¿Cómo rectifico esto por favor?

Este podría ser uno de los problemas de especificidad de CSS. Sólo decorar con !important . Esto debería resolver el problema:

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