Printable View
Salve,
volevo chiedere se e come si potesse creare un pulsante che cambia il colore di sfondo al passaggio del mouse. Attualmente il codice che sto usando è il seguente:
PS: portate pazienza se continuo ad aprire discussioni in questi giorni... :crycry:Codice:<label><input style="height: 25px; background-color:#bbbbbb; border: 1px solid black; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" type="submit" name="submit" id="submit" value="Invialo!!"/></label>
Non puoi continuare ad usare esclusivamente l'attributo style, così mischi la struttura (HTML) con lo stile (CSS). Devi avere le tue pagine con solo la struttura che poi richiamano in testa il foglio di stile, facendo così puoi anche attribuire lo stesso foglio di stile per tutte le pagine e cambiare in un colpo la grafica di tutto il sito.
Quindi comincia: fai una copia di tutto il tuo sito, leva da ogni pagina tutti gli attributi style e inserisci nell'head un elemento link con attributo type impostato su text/css e l'attributo rel su stylesheet, l'indirizzo del foglio di stile lo specificherai nell'attributo href. Infine crea questo foglio di stile CSS: dovrai semplicemente inserire le stesse proprietà che inserivi negli attributi style all'interno di regole. Una regola CSS è costituita da un selettore, seguito dalle proprietà CSS (racchiuse in blocco tra parentesi graffe) da applicare a tutti gli elementi che soddisfano quel selettore.
Ed è proprio sul selettore che devi lavorare per questo specifico problema, ti serve la pseudo-classe hover che permette di identificare un elemento sotto il cursore del mouse.
Per dettagli sui selettori puoi consultare la guida che ti ho precedentemente indicato nell'altra discussione.
A dir il vero ho già una pagina CSS che è questa: http://mrkarati.altervista.org/ColoriStili.css
Ieri, all'interno dell'head, ho inserito questa riga:
All'interno dell'html utilizzo molto spesso l'attributo style per dare alcuni caratteri specifici e non generali. Ovviamente però ribadisco che questo è il primo sito che faccio da 0 per cui non ho idea di quale sia il modo migliore per programmare... motivo per il quale ogni vostro consiglio lo accetto volentieri.Codice:<link type="text/css" rel="stylesheet" href="ColoriStili.css" />
Per quanto riguarda il pulsante invece, girovagando in internet ho trovato una soluzione che immagino sia quella che tu m'hai descritto (non ho avvisato prima di questa cosa per paura di beccarmi un warning). Ho trasformato il codice html così:
Invece nel foglio CSS ho aggiunto queste righe:Codice:<label><input class="primo" onmouseover="this.className='secondo'" onmouseout="this.className='primo'" type="submit" name="submit" id="submit" value="Invia il Video a MrKarati!"/></label>
Codice:input.primo {height: 30px; background-color:#bbbbbb; border: 0px solid black; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
input.secondo {height: 30px; background-color:#cecece; border: 0px solid black; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
Perfetto, va benissimo.Citazione:
Originalmente inviato da mrkarati
Come ti ha già spiegato Dreadnaut nell'altra discussione, l'uso di questo attributo deve essere ridotto al minimo ed è sempre preferibile usare classi e identificatori per identificare i vari elementi.Citazione:
Originalmente inviato da mrkarati
No, questa soluzione non va bene, usa Javascript inutilmente, appesantisce e basta. Devi solo usare la pseudo classe hover:Citazione:
Originalmente inviato da mrkarati
Ti ricordo che essendo il CSS a cascata le proprietà definite nella prima regola del mio esempio permarranno anche in concomitanza con le proprietà definite nella seconda regola, per esempio, se nella prima regola imposti il colore del testo rosso e uno sfondo giallo mentre nella seconda imposti solo uno sfondo verde, al passaggio del mouse solo il colore di sfondo verrà modificato, mentre il testo rimarrà rosso.Codice:selettore{lista di proprietà da applicare sempre}
selettore:hover{lista di proprietà da applicare quando il puntatore del mouse è sopra l'elemento identificato dal selettore}
Puoi sempre usare il pulsante modifica per integrare i messaggi con le novità.Citazione:
Originalmente inviato da mrkarati
Altre piccole precisazioni: il CSS non è un linguaggio per descrivere documenti (quello è l'HTML), ma descrive fogli di stile, non dire dunque pagina CSS ma foglio di stile CSS; inoltre tutte queste cose non concernono la programmazione: HTML e CSS non sono linguaggi di programmazione.
Che dire... ti ringrazio veramente molto per le spiegazioni e per la pazienza, mi stai aiutando non poco. Ora provo subito a fare le modifiche che m'hai consigliato.