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
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
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
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>
Ultima modifica di Laurianti; 10-10-2013 a 09:51
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
ehm.. Si, ma io non sto sovrascrivendo nessuno stile
Aborro questa "soluzione":
Al massimo potrei manipolare il colore direttamente nello style sheets via javascript, ma continuo a non capire perché dovrebbe perdere la regola nell'hovercodice:<!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>