jQuery - come ottenere/leggere proprietà css su: hover pseudo class

Question

Sto lavorando su un preloader dell'immagine che precaricherà tutte le immagini su una pagina. Il mio approccio è la seguente:

onDomReady, scorrere $("*") // passare attraverso tutti gli elementi quando il DOM è pronto

• se $(this).tagName.toLowerCase() == 'img', leggere attributo src, e precarico quell'immagine
• altrimenti se $(this).css("background-image") != "none", leggi il puntello background-image e precarica quell'immagine

Il mio problema è che questo approccio non riprende la classe: hover, che normalmente è l'immagine che avrebbe bisogno di t o essere precaricato in ogni caso.

Quello che mi piacerebbe fare è essere in grado, durante il looping di tutti gli elementi, di verificare l'esistenza della pseudo classe: hover e quindi controllare l'esistenza della proprietà "background-image" su quella classe.

Mi piacerebbe molto attenermi a questo approccio, poiché a) mi consente di non specificare esplicitamente ogni immagine che desidero precaricare, e b) si occupa dei percorsi relativi all'interno del CSS, come la lettura del la proprietà "background-image" mi dà il percorso relativo alla pagina.

Quindi, la mia domanda è:

È possibile, utilizzando jQuery, per leggere le proprietà CSS sul: hover classe di pseudo per un elemento? Se no, qualche suggerimento?

Grazie!

Answer 1

Questo sarà molto intenso quando si carica la pagina per cercare tra tutte le immagini DOM/CSS ... probabilmente non è una buona idea su un sito pubblico. Una buona alternativa è utilizzare gli sprite di immagini (http://www.google.com/images/nav_logo26.png) e posizionarli con CSS

Answer 2

Sembra proprio che gli sprite siano la soluzione giusta a questo problema. Ma se per qualche motivo non possono essere implementati, quello che vuoi fare è accedere alla collezione document.styleSheets per cercare regole con: passa il mouse sopra di loro. This page ti aiuterà a iniziare.