CSS personalizzato cursore, fare clic su punto

Come posso dare una personalizzata, fare clic punto di cursori creata da cursor: url(theCursorUrl);?
ad esempio, si utilizza una mano(afferrare) immagine per il cursore. Ma si desidera che il centro dell’immagine per essere il punto in cui il cursore attuale punti.

InformationsquelleAutor user706071 | 2011-04-13

 

4 Replies
  1. 27

    CSS3 supporta l’impostazione del punto medio di un immagine del cursore, dove l’hotspot del puntatore (cioè il punto in cui scatti sono registrato) è:

    cursor: url(mycur.cur) 6 6, auto;

    Dove i due 6 valori media di 6 pixel da sinistra e 6 pixel dall’alto, rispettivamente. L’hotspot di default è sempre l’angolo in alto a sinistra dell’immagine, cioè 0 0.

    Browser il supporto per questa funzionalità può essere piuttosto scarsa anche se, come è un CSS3 caratteristica, quindi, non è qualcosa che si dovrebbe fare affidamento solo sulla sicurezza. (Detto questo, Firefox è supportato dalla versione 1.5!) Se un browser non in grado di interpretare le coordinate, cursore proprietà saranno ignorati, in modo da essere attenti.

  2. 7

    Questo è un piuttosto delicato problema se si desidera croce di compatibilità del browser per il tuo cursore personalizzato (quando l’hotspot non è in alto a sinistra).
    Prima di tutto, si sono limitati dai vale a dire di usare .cur formato. L’ .cur formato incapsula anche l’hotspot posizione. È possibile modificare .cur formato (ci sono strumenti gratuiti là fuori, come Mondo Reale Cursor Editor) per impostare l’hotspot pixel.
    Purtroppo, chrome ignora il incapsulato hotspot dell’ .cur formato per qualche motivo, e impostata di default a 0, 0. Pertanto è necessario fornire queste coordinate, ma in questo modo IE ignorare l’intera proprietà css…

    Il mio approccio quando si lavora con cursori personalizzati con hotspot diverso 0,0) è questo:

    Primo set l’hotspot pixel alle coordinate desiderate (9,7 in questo esempio) utilizzando un .cur editore. Quindi utilizzare qualcosa di simile al di sotto. Questo sarà coprire IE, FF e Chrome

    cursor:url(mycursor.cur), default;
    cursor:url(mycursor.cur) 9 7, default; /*chrome cursor hotspot fix - ignored by IE
    • Non ho mai capito questo di circa il .cur formato. Ancora un altro motivo per odiare Chrome, anche se, ma è la fortuna che si può ancora essere risolto utilizzando i CSS senza ricorrere ad hack. Non Firefox semplicemente utilizzare embedded coords o il CSS coords senza problemi dato che supporta coords in CSS?
    • Chrome ora legge l’hotspot dal file CUR e se è impostata anche la proprietà CSS, CSS ha la precedenza. Questo problema è stato risolto nella versione 36 penso, almeno non si è risolto.
    • grande notizia!!!
    • Ciao @RaduSimionescu ho aggiunto il codice di cui sopra, nel mio css file, e l’ho trovato non funziona con IE/Edge. Visualizza solo il cursore di default di IE e di Bordo.
    • sì, questo è stato inviato come 5 anni fa… le cose sono cambiate molto da allora.
    • Mi dispiace, è colpa mia. Questo codice funziona ancora.

  3. 1

    La sintassi di base è il seguente:

    cursor: url(image) [x y|auto];

    Tuttavia ci sono una serie di peculiarità di essere a conoscenza di che lo rendono molto difficile lavorare con il cross-browser.

    La principale è che Internet Explorer richiede il cursore in ‘.cur’ formato, mentre gli altri browser richiedono in formato immagine standard (ad esempio ‘.gif’). Se si desidera supportare tutti i browser, è necessario creare e scrivere un browser specifico codice.

    E a quanto pare non funziona affatto in Opera.

    Il Quirksmode sito dettagli completi di tutte le stranezze aspettarsi.

    • Gecko e WebKit sostenere la .cur formato bene. Inoltre, auto è separato dall’URI componente.
    • ah, bene. Credo di fare affidamento su Quirksmode troppo per una risposta definitiva su questo genere di cose. 🙂

Lascia un commento