I fogli di stile CSS (Cascading Style Sheets) sono progettati utilizzando il o XML (inclusi XHTML, SVG). È un linguaggio per fogli di stile utilizzato principalmente per descrivere elementi attraverso una serie diversificata di metodi di formattazione. Uno dei metodi è il passaggio del mouse e in questo articolo, capiremo Hover in CSS nel modo seguente:
- Cos'è Hover in CSS?
- Dove viene utilizzato Hover?
- Cosa fa Hover?
- Compatibilità
- Come funziona?
- Cambia colore di sfondo al passaggio del mouse in 'Rosso'
- Creazione di opacità al passaggio del mouse sulle immagini
- Creazione di testo in sovrimpressione sulle immagini
Cos'è Hover in CSS?
CSS hover è un componente di selezione che viene utilizzato per definire elementi diversi quando il puntatore del mouse passa su di essi. Possono essere utilizzati su quasi tutti gli elementi HTML. La funzione hover in CSS ha un'importanza sostanziale nella progettazione di pagine web.
Il componente hover può evidenziare, codificare e personalizzare le pagine web secondo le preferenze dell'utente in un programma di web design compatto ed efficace.
cosa fa append in java
Dove viene utilizzato Hover?
Gli esempi più comuni della fattibilità della funzione hover possono essere evidenziati sui principali siti Web di shopping come Flipkart e Amazon. Quando gli utenti passano il mouse su un prodotto su questi siti di e-commerce, il prodotto è programmato per eseguire una funzione di zoom automatico al passaggio del mouse per fornire al cliente una visione migliore dei prodotti selezionati. Attraverso questa programmazione, la pagina web è progettata per visualizzare una visione compatta dell'intera gamma di prodotti accompagnata da una visione dettagliata del prodotto di interesse in una singola pagina web.
Cosa fa Hover?
L'hover è uno strumento di programmazione multifunzionale attraverso il quale l'utente può personalizzare l'elemento target con un numero infinito di criteri di formattazione. Alcuni esempi del know-how operativo della funzione hover includono:
- Modifica del colore di sfondo / carattere
- Incorporamento di testo nascosto visualizzato al passaggio del mouse
- Crea effetti di rollover sulle immagini
- Zoom automatico su testo / immagini
- Modifica l'opacità dell'immagine
- Incorporamento del testo
- Scambio di immagini
- Div. Hover
- Molte altre operazioni di formattazione al passaggio del mouse CSS.
L'effetto al passaggio del mouse modifica sostanzialmente il valore della proprietà di un elemento per abilitare le modifiche animate a un testo / immagine dichiarato o ai rispettivi elementi. L'incorporamento di elementi CSS al passaggio del mouse nel design di una pagina Web trasforma una normale pagina Web in una pagina Web interattiva, robusta e altamente funzionale. Questi design di pagine web sono facili da usare e completi. Le pagine web progettate al passaggio del mouse contengono un maggiore appeal per i consumatori e attirano l'attenzione dei potenziali clienti.
Compatibilità di Hover in CSS
La funzione hover è compatibile con tutti i principali browser web. Tuttavia, l'implementazione di questo elemento sui dispositivi touch è ancora un compito impegnativo. Il passaggio del mouse in CSS abilita l'accessibilità del contenuto sui dispositivi che non supportano le funzioni del passaggio del mouse. È stato osservato che una funzione hover attivata sul dispositivo non di supporto può rimanere bloccata sul dispositivo.
Di conseguenza, la visualizzazione vitale di contenuti cruciali viene bloccata a causa del problema di formattazione. Da un lato, laddove l'elemento hover nel programma CSS contribuisce a un ottimo livello di personalizzazione efficiente delle pagine Web, viceversa, la sua operabilità sui dispositivi mobili è altamente dormiente. Capitando alle circostanze in cui il mondo della tecnologia dell'informazione sta crescendo sostanzialmente mobile, la funzione hover rischia di diventare obsoleta con i progressi tecnologici. Pertanto, la necessità di fabbricare una funzionalità incorporata portatile che funzioni con il tocco e i dispositivi mobili è estremamente cruciale.
Come funziona Hover in CSS?
Lo stile di pseudo-classe attivo è dominante nella formattazione al passaggio del mouse CSS e sovrascrive qualsiasi / tutti i collegamenti successivi seguiti da questa pseudo-classe. Ad esempio nella pseudo-classe “: link: visit, o: active, la regola: hover deve essere inserita dopo: link e: visitata ma prima: attiva per uno stile appropriato: hover. L'ordine LVHA:: link,: hover,: viewed e: active viene utilizzato come riferimento per lo stile di formattazione corretto: hover.
div {background-color: green padding: 18px display: none} span: hover + div {display: block}Hover Test!Il codice nascosto viene visualizzato al passaggio del mouseNel codice precedente, l'elemento span viene modificato per unire gli elementi hover e div utilizzando l'elemento span: hover + div. L'elemento span che verrà visualizzato sulla pagina web di destinazione principale mostrerà il testo 'Hover test!' Un ulteriore passaggio del mouse sull'elemento span rivela l'elemento div 'Il codice nascosto viene visualizzato al passaggio del mouse'. Questo formato di incorporamento è operativo sul testo e sulle immagini.
Cambia colore di sfondo al passaggio del mouse in 'Rosso'
p: hover, h1: hover, a: hover {background-color: Red}Hover Red
Hover Red
Collegamenti:
Hover Test rosso:
Google com Nota: Ciao
Il codice sopra personalizza il file
,