Quiero detectar si un elemento tiene algún cambio, como el color de fondo cambia a otro o el cursor cambia a puntero, al pasar el mouse por javascript.
Pensé en usar getComputedStyle(element, ":hover") pero esto no está disponible con :hover pseudo.
También traté de simular el paso del mouse por jQuery como se muestra a continuación, pero parece que no funciona como esperaba.
$obj.css('cursor') $obj.mouseover().css('cursor')¿Hay alguna buena manera?
Puede agregar un detector de eventos, como "mouseenter" y luego registrar en la consola cada vez que el mouse pasa sobre un elemento.
Si prueba este código, verá que la cantidad de veces que ha pasado el mouse sobre los elementos de la lista aparecerá en la consola.
aquí hay un enlace a la documentación del evento "mouseover", que usé y edité para ayudar a simplificar mi respuesta.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul id="test"> <li>Check if item has been hovered over</li> <li>item 2</li> </ul> <script> let test = document.getElementById("test"); // This handler will be executed only once when the cursor moves over the unordered list test.addEventListener("mouseenter", function(event) { // highlight the mouseenter target console.log("purple has been hovered over") event.target.style.color = "purple"; // reset the color after a short delay setTimeout(function() { event.target.style.color = ""; }, 500); }, false); </script> </body> </html>Desafortunadamente, no puedes hacerlo a través de jQuery así. Probablemente necesite obtener las hojas de estilo para el documento y recorrerlas manualmente para encontrar coincidencias con su selector.
function getCss(cssSelector){ var styleSheets = document.styleSheets; var matchedRules = []; for(var i = 0; i < styleSheets.length; i++) { var rules = styleSheets[i].rules || sheets[i].cssRules; for (var j = 0; j < rules.length; j++) { if (rules[j].selectorText === cssSelector) { matchedRules.push(rules[j].cssText); } } } return matchedRules; }A continuación, puede llamar a la función para obtener las reglas coincidentes. Por ejemplo:
getCss("a:hover");