Stile cursore personalizzato cross-browser

Visualizzo una mappa del mondo con un tag img. Associo una mappa immagine con l'hyperlink ad alcune regioni. Sovrappongo un div box bordato che indica che una determinata regione può essere cliccata e ingrandita.Stile cursore personalizzato cross-browser

Ora per mostrare all'utente lo fa Voglio che il cursore cambi a forma di lente di ingrandimento. Ho guardato attraverso il web e ho trovato qualcosa che funziona in Firefox e IE6-8:

#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }

Purtroppo Opera, Chrome e IE9 ignorarlo e mostrare il valore di default (cioè .: puntatore). Come posso utilizzare le icone cursore personalizzate cross-browser?

fonte

2011-07-05 Johan

Un modo economico per farlo sarebbe aggiungere un ulteriore elemento alla pagina con la nuova immagine del cursore desiderata, utilizzare JavaScript per posizionarlo sempre con il mouse e utilizzare CSS per nascondere il cursore reale. Ma probabilmente non sei interessato a farlo in quel modo. – sdleihssirhc

Penso che impedirebbe agli eventi click di arrivare dove dovrebbero andare. – krasnerocalypse

E sei sicuro che l'immagine sia a templates/test/styles/images/magnify.cur? – krasnerocalypse

La -moz- parte del -moz-zoom-in; significa che è per Mozilla solo, per renderlo cross browser, è necessario tutti i tag nello stesso tag id CSS:

#zoomregion:hover { 
    cursor: url('templates/test/styles/images/magnify.cur'); 
    -webkit-zoom-in; 
    -moz-zoom-in; 
    -ie-zoom-in; 
    -ms-zoom-in; 
    -o-zoom-in; 
}

-webkit- conti per un sacco di browser , incluso il cellulare (che, per questo uso, probabilmente non è necessario), che è molto utile e accorcia le cose molto.

fonte

2017-06-02 16:02:08

Stile cursore personalizzato cross-browser

risposta

Problemi correlati