necesito eliminar/desactivar/cambiar a cero el siguiente argumento de estilo:
#wrapper .fragment-card.aktuelles-card .image-card img:hover{ transform:scale(3); box-shadow:0 4px 6px 0 #222; }esto tiene que suceder con Javascript muy básico, por lo que no puedo usar libarys, etc. La parte JS se ejecutará al final de la página.
¡Gracias por tu ayuda!
No puede desactivar directamente una regla CSS usando javascript. Así que tienes dos opciones:
1) La primera opción usa solo javascript para hacerlo. Puede modificar el atributo de estilo del elemento utilizando el método setAttribute() para establecer transform: none; box-shadow: none; . Como esto:
const el = document.querySelector("#myElementId"); el.setAttribute("style", "transform: none; box-shadow: none;");Sin embargo, no me gusta usar el atributo de estilo mientras uso las reglas css, ya que prefiero ver todos los estilos en el mismo archivo css y hace que sea más difícil mantener el código, por lo que no recomiendo usar esta solución.
2) La solución de buenas prácticas involucra tanto CSS como JS. Tienes que hacer referencia a tu regla css a una clase .my-style . Entonces escribes tu regla css así:
.my-style { transform:scale(3); box-shadow:0 4px 6px 0 #222; } Entonces, ahora deberá usar Javascript para agregar o eliminar la clase .my-style cuando lo necesite. En el caso de la referencia img:hover que usa en su css original, puede crear su propia función js para agregar la clase cuando se desplaza un img y eliminar la clase cuando el puntero deja el img . Este detector de eventos será útil:
document.querySelectorAll("img").forEach(img => { img.addEventListener("mouseover", function() { img.classList.add("my-style"); }) img.addEventListener("mouseleave", function() { img.classList.remove("my-style"); }) }); document.querySelectorAll("img").forEach(img => { img.addEventListener("mouseover", function() { img.classList.add("my-style"); }) img.addEventListener("mouseleave", function() { img.classList.remove("my-style"); }) }); .my-style { transform:scale(3); box-shadow:0 4px 6px 0 #222; } img { width: 200px; height: auto; } <img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg"> <img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg"> <img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">Simplemente podría crear otra hoja de estilo y agregarla al final del elemento de encabezado si está seguro de que el estilo ofensivo está establecido en el encabezado. Si no, podrías ponerlo al final del cuerpo.
Este fragmento lo agrega al final de la cabeza:
<!doctype html> <html> <head> <style> #wrapper .fragment-card.aktuelles-card .image-card img:hover { transform: scale(3); box-shadow: 0 4px 6px 0 #222; } </style> </head> <body> <div id="wrapper"> <div class="fragment-card aktuelles-card"> <div class="image-card"> <img src="https://picsum.photos/id/1015/200/300"> </div> </div> </div> <script> const style = document.createElement('style'); style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};'; const head = document.querySelector('head'); head.appendChild(style); </script> </body> </html>