OnMouseOver non funziona dopo OnBlur

[AleVale94]

Molto semplice: ho un search, gli ho dato qualche stile in CSS e qualcun altro con DHTML... Se il campo non è attivo ha un colore, diciamo nero. Quando passo sopra col mouse deve diventare rosso. Se lo clicco deve diventare bianco.
La prima volta è ok. Poi, se quando è bianco clicco fuori, deve tornare nero e ricominciare tutto da capo. tuttavia se faccio così, l'evento onmouseover (dato da css eh) non funziona più.

Spero di essermi spiegato bene xD probabilmente è una sciocchezza, ma non so come risolvere.

[AleVale94]

up

[TrueLies]

in realtà onblur non ti serve ma ce lo aggiungo giusto per extra sicurezza - quel che ti serve con onmouseover è il controgestore onmouseout, che a quel punto funge anche da onblur:

<form>
<input type="button" value="ciao" style="background-color:#000000; color:#ffffff;" onclick="this.style.backgroundColor='#ffffff'; this.style.color='#000000';" onblur="this.style.backgroundColor='#000000'; this.style.color='#ffffff';" onmouseover="this.style.backgroundColor='#ff0000'; " onmouseout="this.style.backgroundColor='#000000'; this.style.color='#ffffff';" />
</form>

[AleVale94]

Ok, così non ci sono dubbi che funzioni, ma come mai se faccio tramite css non va?

[carlomarx]

Originariamente inviato da AleVale94
Ok, così non ci sono dubbi che funzioni, ma come mai se faccio tramite css non va?

Non va perché il browser dà priorità agli stili dichiarati nel DOM rispetto a quelli dichiarati via CSS. Il mio consiglio è di non utilizzare onmouseover e onmouseout via javascript, quelli tieniteli per il css. Semplicemente, al focus assegnagli un colore di sfondo:

this.style.backgroundColor = "#ffffff";

e al blur, invece di assegnargliene un altro come ti aveva suggerito TrueLies, semplicemente rimuovi l'assegnazione via DOM:

this.style.removeProperty("backgroundColor");

Questo dovrebbe ripristinare il funzionamento del mouseover settato nel css.

[TrueLies]

E bisogna vedere il css che stai usando - dipende se per te è importante l'obbiettivo in sè (immediatamente raggiungibile in javascript), od ottenerlo per forza tramite css. Se vuoi ottenerlo con il css postaci i selettori che stai usando e vediamo cosa c'è che non va (per quanto sarebbe più tematica da forum css): tmtowtdi ma non tutte sono implementate da tutti i browser - questo vale sia per certi selettori che per certe espressioni javascript.

La soluzione che ti ho fornito va su tutti i browser - niuna exception! Se per te è critico ottenerlo via css o è una curiosità particolare che hai capire come mai il tuo css non si comporta nel modo atteso, vediamo il css: non c'è altro da fare.