Foros del Web » Programando para Internet » Jquery »

Cuando modifico estilos con javascript deja de funcionar el efecto :hover

Estas en el tema de Cuando modifico estilos con javascript deja de funcionar el efecto :hover en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2019, 17:29
 
Fecha de Ingreso: julio-2013
Mensajes: 4
Antigüedad: 6 años, 4 meses
Puntos: 0
Cuando modifico estilos con javascript deja de funcionar el efecto :hover

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";

}


}
});
  #2 (permalink)  
Antiguo 05/07/2019, 19:20
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.547
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Cuando modifico estilos con javascript deja de funcionar el efecto :hover

el hover te deja funcionar por el peso que tiene cada uno de ellos, también llamado jerarquía y especifidad

En este caso creo que seria especifidad refiriéndose a cuan especifica es una propiedad, y que puede ser mas especifico que declararlo sobre el elemento en cuestión :D

Los estilos en linea ya sea en el codigo html o los declarados sobre los elementos son prioritarios sobre los que se cargan en hojas CSS

Para solventarlo tienes que usar !important en tu hoja CSS, o mejor aun, en lugar de cambiar los estilos mediante Javascript (algo totalmente desaconsejado) es utilizar una clase CSS, agrega o quita una clase CSS para cambiar el estado de tu botón, de esa forma no perderás funcionalidad ni tendrás que recurrir a !important (también desaconsejado el uso intensivo de esto)
  #3 (permalink)  
Antiguo 07/07/2019, 04:38
 
Fecha de Ingreso: julio-2013
Mensajes: 4
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Cuando modifico estilos con javascript deja de funcionar el efecto :hover

Tio muchas gracias! Me has hecho digievolucionar como programador web :)

Por cierto, funcionó obviamente, y es de esas veces que piensas en cómo no se te había ocurrido antes... jeje.

Gracias otra vez



La zona horaria es GMT -6. Ahora son las 04:20.