Perché dopo aver cambiato qualcosa allo stile non funziona più :hover?

**Laurianti** · 09-10-2013, 13:19

Perché dopo aver cambiato qualcosa allo stile non funziona più :hover?
Ho visto qualcosa tipo che viene inserito

codice:

!important

nella regola css, e quindi in qualche modo viene forzata ad entrare in gioco
Perché succede sta roba? Altre soluzioni?

**Mich_** · 09-10-2013, 15:50

La descrizione e` troppo generica. Non e` possibile dare una risposta.

Potrebbe essere un errore nel CSS, ma senza vedere la pagina (posta un link!) non e` possibile dare una risposta

**Laurianti** · 10-10-2013, 09:49

Originariamente inviata da Mich_

La descrizione e` troppo generica. Non e` possibile dare una risposta.

Potrebbe essere un errore nel CSS, ma senza vedere la pagina (posta un link!) non e` possibile dare una risposta

Non volevo apparire superficiale nella descrizione poco dettagliata, ma quello che ho scritto è esattamente quello che intendevo

codice:

<!doctype html>
<html>
    <head>
        <style>
        #contenitore{
        width:200px;
        height:200px;
        background-color:red;
        }

        #contenitore:hover{
        background-color:blue !important;
        }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <input type="button" onclick="document.getElementById('contenitore').style.backgroundColor='yellow';" />
        </div>
    </body>
</html>

**widoz83** · 10-10-2013, 12:41

secondo me l'effetto indesiderato è causato dall'istruzione javascript sull'onclick del bottone. Va a sovrascrivere lo stile del div che hai definito sopra.

gli stili definiti inline sovrascrivono quanto hai definito in precedenza nel tag <style> o su eventuali stili importati da file esterni.

se provi a definire il div in questo modo (togliendo "! important" dall'hover):

<div id="contenitore" style="background-color:green;">
....
</div>

Vedrai che anche se ci passi sopra il colore rimane sempre verde. Per il browser è "più importante" quello che hai scritto nel div rispetto a quello scritto nello <style> sopra.

In alternativa potresti definire delle classi adhoc per evitare di usare l'istruzione "! important".

Ciao

**Laurianti** · 10-10-2013, 13:13

ehm.. Si, ma io non sto sovrascrivendo nessuno stile

Aborro questa "soluzione":

codice:

<!doctype html>
<html>
    <head>
        <style>
        #contenitore{
			width:200px;
			height:200px;
			background-color:red;
        }


        #contenitore:hover, #contenitore2:hover{
			background-color:blue;
        }
		
		#contenitore2{
			width:200px;
			height:200px;
			background-color:purple;
		}
        </style>
    </head>
    <body>
        <div id="contenitore">
            <input type="button" onclick="document.getElementById('contenitore').id='contenitore2';" />
        </div>
    </body>
</html>

Al massimo potrei manipolare il colore direttamente nello style sheets via javascript, ma continuo a non capire perché dovrebbe perdere la regola nell'hover

**widoz83** · 10-10-2013, 15:40

come ti dicevo prima è l'istruzione

codice:

document.getElementById('contenitore').style.backgroundColor='yellow';

che ti va a sovrascrivere quanto dichiarato nel tag <style> (:hover compreso).

la mia alternativa era di utilizzare le classi css (.nomeClasse).

codice:

<html>
    <head>
        <style>
        #contenitore{
            width:200px;
            height:200px;
        }
        #contenitore:hover{
            background-color:blue;
        }
        .red{
            background-color:red;
        }
        .yellow{
            background-color:yellow;
        }
        </style>
    </head>
    <body>
        <div id="contenitore" class="red">
            <input type="button" onclick="document.getElementById('contenitore').className='yellow';" />
        </div>
    </body>
</html>

oppure provare qualcosa con JQuery.

Ciao

**Laurianti** · 11-10-2013, 09:47

Si, ho sbagliato, ma avevo capito cosa volevi dire.
Il tuo esempio funziona se la classe è una sola.
Internet Explorer 8 (che non è ancora del tutto trascurabile in Italia) gestisce le più classi di un elemento del DOM in un modo particolare, e lì si crea un sistema di gestione delle classi, o si usa "cede" all'uso di jQuery.
Solitamente se posso farne a meno, lo faccio.
Comunque continuo a ribadire il fatto che non dovrebbe sovrascrivere lo stile, alla fine width e height rimangono.
Così come gli altri elementi dello stile.
Comunque grazie

**widoz83** · 11-10-2013, 10:22

Hai ragione, mi sono espresso male, con sovrascrivere lo style, intendevo la sola proprietà background-color.
Se hai modo di utilizzare Chrome, prova a fare "Ispeziona Elemento" e poi a cliccare il tuo bottone di cambio background, vedrai che la struttura del documento cambierà, aggiungendo un style="background-color:yellow" inline sul tag div.

Ciao

Discussione: Perché dopo aver cambiato qualcosa allo stile non funziona più :hover?

Strumenti discussione

Ricerca discussione

Visualizza

Perché dopo aver cambiato qualcosa allo stile non funziona più :hover?

Permessi di invio