Hola, a ver si alguien es capaz de iluminarme porque creo que se soluciona de forma sencilla pero yo no encuentro el problema.
Estoy diseñando un paginador para un scroll infinito, centrémonos en los 3 botones del medio que empiezan siendo 1, 2 y 3 siendo el 1 el que esta seleccionado con un fondo de color mientras que el 2 y el 3 están en blanco y con sombra. Cuando pasas el ratón por los botones 2 y 3 en la hoja de estilos css que esta declarada como archivo, no en el mismo código de la página el :hover de esa clase está configurado para que cuando pases el ratón el padding-top se reduzca en 1 pixel y la sombra se aclara para dar el efecto de "hundirse".
Hasta ahí todo normal. Cuando vas haciendo scroll y va cargando la segunda página hay unos disparadores waypoints que hacen que el 1 deje de estar seleccionado con el fondo de color y se ponga blanco, y el 2 de color con el padding-top a 1 pixel menos y con la sombra mas clara para que parezca que está seleccionado. Esto también funciona y se hace modificando el estilo mediante "document.selectblablabla.style.padding-top" etc.
Y también todo normal... PERO si vuelvo atrás a la pagina 1, vuelve a ponerse seleccionado el 1 y el 2 en blanco PERO ya no funciona el efecto asignado en la hoja de estilos CSS para el :hover.
Para resumir: cuando modifico cualquier valor de la clase si este tenía un valor en la pseudo clase hover deja de funcionar.
¿Por qué??????
HTML:
<a href="" class="navboton">←</a>
<a href="" class="navboton" id="b1">1</a>
<a href="" class="navboton" id="b2">2</a>
<a href="" class="navboton" id="b3">3</a>
<a href="" class="navboton">→</a>
Javascript
:
$('#pag<?=$pag?>f').waypoint(function(direction) {
if (direction == 'up') {
var urlactual = window.location.pathname;
var pagina = parseInt(document.getElementById("pagina").value);
var pagpoint = "<?=$pag?>";
history.pushState(null, "", urlactual.replace("/"+pagina+"/","/"+pagpoint+"/"));
document.getElementById("pagina").value = pagpoint;
if (<?=$pag?> == 1){
document.getElementById("b2").style.backgroundColo r = "#FFF";
document.getElementById("b2").style.opacity = "0.9";
document.getElementById("b1").style.backgroundColo r = "#ffccc2";
document.getElementById("b1").href = "javascript
: return false;";
document.getElementById("b1").style.paddingTop = "9px";
}
}
});