CSS non hover
Esempio # 01:
Daremo un'occhiata ad alcuni degli elementi di HTML applicando la proprietà non hover su di essi. Abbiamo iniziato il primo esempio dal tag HTML di base che è un must in qualsiasi codice HTML perché senza di esso il nostro codice non funzionerà comunque. Dopo il tag HTML, c'è un tag di testa e il tag del corpo. All'interno del tag corporeo della nostra pagina HTML, abbiamo utilizzato una voce di dimensione 1 o la più grande intestazione di pagine Web HTML. Dopo questa intestazione, abbiamo utilizzato un tag DIV per creare una nuova sezione nella nostra pagina web.
Questo tag è stato specificato come genitore usando lo stile di classe. All'interno di questo principale tag Div, abbiamo usato i cinque tag per bambini. Tutti e cinque i tag figlio sono specificati come "figlio" usando l'attributo di classe. Inoltre, tutte le sezioni dei bambini contengono numerazione diversa in base al loro verificarsi. Il principale tag "div" e il tag corpore sono chiusi. Ecco che arriva il tag del titolo che è stato utilizzato per dare un nome a questa pagina web. Il tag di stile è stato avviato con l'uso delle specifiche della classe "genitore" per modellare la sezione div "genitore" di questa pagina web.
La proprietà del display del CSS è stata utilizzata per la sezione PAMS DIV per visualizzarla in posizione in linea. Il colore di sfondo è stato impostato e il bordo di questo sfondo è stato impostato su 1 pixel solido con colore bianco. Mentre la larghezza della sezione "div" genitore sarebbe di 500 pixel e l'altezza sarebbe di 120 pixel. Lo stesso display è stato utilizzato per le sezioni figlio e lo sfondo è stato impostato su un colore diverso. Inoltre, è stato fissato il bordo di 5 pixel di colore verde solido. La larghezza e l'altezza delle sezioni dei bambini sono state definite come 100 pixel ciascuno. Le sezioni figlio contengono uno stile extra rispetto alla sezione del genitore. La proprietà di transizione è stata impostata su 0.5 secondi insieme alla famiglia dei caratteri. Il peso del carattere è stato impostato su grassetto e la dimensione del carattere sarebbe di 100 pixel per le sezioni del bambino. È ora di utilizzare la proprietà non hover per le sezioni dei figli con un'opacità di 0.5. Questo codice HTML è stato completato e lo eseguiremo nel browser Chrome per vedere come funziona la proprietà non hover.
L'output per questo codice HTML è stato riportato di seguito. Mostra che la sezione genitore contiene anche 5 sezioni figlio ma l'uso di non hover proprietà per le sessioni figlio non consente affatto che il loro colore cambi.
Esempio # 02:
Prendiamo un altro esempio di HTML per vedere il funzionamento della proprietà non hover su diversi elementi. Inizieremo questa illustrazione con lo stesso tag HTML e testa contenente il tag del titolo in esso. Diamo un'occhiata al corpo di questa pagina HTML prima. All'interno del tag del corpo, abbiamo usato una voce di dimensioni più grandi in HTML. Abbiamo usato il tag DIV per creare una nuova sezione nella nostra pagina Web HTML. Questa sezione Div conterrebbe alcuni tag di ancoraggio per gli URL e alcuni elenchi. Abbiamo usato il primo tag di ancoraggio sulla parola di casa all'interno della sezione principale "div" che ci sta reindirizzando alla pagina attualmente aperta. Abbiamo avviato un elenco non ordinato contenente un singolo elenco al suo interno. Questo elemento elenco singolo contiene un tag di ancoraggio insieme all'elenco non ordinato di un totale di 3 elementi di elenco. Questi elementi elencano si riferiscono anche ad alcuni siti di social media utilizzando i tre tag di ancoraggio elementi elementi all'interno dei tag di elenco "LI" di HTML. Tutti e tre questi tag di ancoraggio sono stati classificati da bambino. L'elenco non ordinato degli elementi di singolo elenco è stato chiuso insieme alla chiusura dell'elenco non ordinato esterno.
Ora guarderemo il tag di stile. Il colore di sfondo per l'intera sezione Div è stato specificato come verde chiaro. I tag di ancoraggio di questa sezione non hanno decorazioni di testo ma il colore sarebbe bianco e la dimensione del carattere sarebbe di 25 pixel con un'imbottitura di 15px. Lo stile del display sarebbe in linea. L'elenco non ordinato principale è stato specificato con il display in linea, 0 margini e 0.Imbottitura da 5 pixel. Un singolo elenco all'interno di un elenco ordinato verrà visualizzato in un formato di blocco in linea.
La proprietà Hover è stata utilizzata per questo elenco per cambiare il suo colore in grigio quando si librano. Dopo aver applicato la proprietà Hover, l'elenco non ordinato al suo interno verrà visualizzato come blocco in linea. La posizione è stata impostata su assoluto. La larghezza è stata impostata su 200 pixel e il display è stato impostato su nessuno per l'elenco non ordinato all'interno dell'elenco singolo ordinato. Per l'elenco ordinato all'interno dell'elenco non ordinato, abbiamo specificato il colore di sfondo e visualizzarlo come un blocco. Il display a blocchi per un'ancora sarebbe molto importante per ottenere la priorità.
I tre elenchi utilizzano anche la proprietà Hover con sfondo blu. Qualsiasi elemento che è stato classificato come bambino userebbe la proprietà non hover con l'opacità di 0.3 e colore cremisi.
Quando eseguiamo questo codice, visualizza l'output di cima mostrato con elenchi di menu Home and Social Networks.
Quando ci libramo sui "social network", è diventato più importante e l'elenco ordinato sarebbe stato visualizzato.
Dopo essersi litigato sull'elemento dell'elenco ordinato, lo sfondo è stato cambiato in blu per un po 'con il testo bianco. L'uso di no: la proprietà hover non cambia il colore del testo.
Conclusione
Questo articolo riguardava l'uso di NOT: Proprietà del calo di CSS su alcuni elementi HTML di una pagina web. Abbiamo discusso di due esempi semplici e unici per dimostrarli sul codice Visual Studio. All'interno del primo esempio, abbiamo provato a usarlo sull'elemento "Div" di HTML e nel secondo esempio, è stato usato sugli elenchi non ordinati e ordinati di HTML. Entrambi gli esempi sono molto diversi l'uno dall'altro, ma coprono lo stesso concetto per entrambi.