Come creare un passaggio del mouse a mano in CSS

June 3

Come creare un passaggio del mouse a mano in CSS


i fogli di stile a cascata (CSS) sono file di testo collegati a pagine HTML che controllano la progettazione e l'aspetto della pagina. CSS ha diversi effetti mouseover oltre al normale "freccia". Per impostazione predefinita, la maggior parte dei browser web visualizzano il puntatore del mouse "mano" su collegamenti attivi, se il testo o le immagini. Tuttavia, vi è un metodo per forzare un "mouseover mano" in CSS. Essere consapevoli, tuttavia, che, poiché "mouseover mano" di solito indica un hot-spot, come ad esempio un collegamento, usarlo in luoghi diversi collegamenti possono trarre in inganno gli utenti del sito.

istruzione

1 Aprire la pagina web e il file CSS allegato in due finestre differenti con un editor HTML o un editor di testo come Blocco note.

2 Determinare l'area all'interno della pagina web, in cui l'effetto "mano mouseover" deve essere attiva. Scansione attraverso il codice HTML per individuare il tag DIV che contiene per il corrispondente area della pagina web.

3 Si noti il ​​selettore CSS per il tag DIV, come ad esempio "id" o "classe".

4 Sfogliare il file CSS e trovare il blocco di codice relativo che definisce il tag DIV. Utilizzare qualsiasi selettore CSS per questo scopo, "id" o "classi".

5 Aggiungere il codice di linea CSS "cursor: pointer;" al blocco di codice CSS del tag DIV.

Consigli e avvertenze

  • file CSS separano completamente il design dalla sorgente HTML; così la maggior parte degli aspetti di progettazione possono essere completamente trattati con la sola CSS, anche se Javascript frammenti di codice possono ottenere una funzionalità simile.
  • Ci sono altri effetti puntatore del mouse, come mirino, ridimensionare, aiuto, spostare, il progresso, attendere e testo. Semplice sostituzione della linea di codice CSS "cursor: pointer;" con l'effetto desiderato è tutto ciò che serve per cambiare il puntatore del mouse nel dato elemento tavola, in questo caso il tag DIV.
  • Anche se "default" è un valore opzionale per la proprietà CSS "cursore", non è necessario parlare a meno che tutti i tag madri sono definiti con valori cursore personalizzato, e il tag figlio relativa deve possedere valori cursore predefinito.
  • CSS proprietà "cursore" viene ereditato per default, il che significa che i blocchi figlio erediterà il funzionamento del cursore dai loro blocchi principali.
  • mouseover mano è l'impostazione predefinita per i cursori, quando viene puntata sui collegamenti. Forzati a mano mouseovers su testo normale o aree possono trarre in inganno gli utenti a pensare che si tratta di link attuali. Questo potrebbe influenzare negativamente l'esperienza degli utenti all'interno della pagina web o sito.
  • righe di codice CSS e blocchi di codice CSS sono separate da un punto e virgola e parentesi graffe, rispettivamente. L'omissione di tali personaggi in CSS può causare errori imprevisti e / o generare falsi markup HTML. L'unica eccezione è che la virgola di una linea di codice CSS finale (appena prima della parentesi graffa di chiusura) all'interno di un blocco di codice non è necessario.