Problemino mouseover colour

[danielepalmas88]

Salve ragazzi, ho un problemino...

- Mi occorre impostare una scritta cliccabile che mandi ad un url.
- Tale scritta deve essere bianca, che al mouseover diventa blu.
- Per diverse ragioni non posso modificare il CSS, visto che uso Wordpress, e a me serve agire singolarmente soltanto su questo link che si trova dentro un post specifico.
- Per questo motivo ho optato per js. Ma ho un problemino.

Usando questo codice...
<h2><a href="LINK" onmouseout="this.style.color='white'" onmouseover="this.style.color='blue'" style="position:absolute; top:500px;left:500px;"><font size="7">CLICCA QUI</a></font></h2>
...succede che il colore iniziale della scritta cliccabile non è bianco come vorrei, ma del colore tipico impostato sul css di wordpress. Questo implica che tale scritta diventerà bianca solamente dopo aver fatto mouseover sopra di essa ed aver ritolto il puntatore. Soltanto dopo tale azione la scritta CLICCA QUI diventerà basilarmente bianca.

Ho provato ad ovviare al problema inserendo dentro tale codice un banale <font color="white"> ma ho notato che questo preclude tutto il resto, facendo sì che la scritta sia bianca di default, ma il mouseover poi non funziona più, quindi non diventa blu quando ci vado sopra con l'indicatore del mouse.

Qualche suggerimento?

[KillerWorm]

- Per diverse ragioni non posso modificare il CSS, visto che uso Wordpress, e a me serve agire singolarmente soltanto su questo link che si trova dentro un post specifico.

Ciao, CSS offre svariati selettori; tu hai certezza di non poter comunque rintracciare quel link in modo specifico?
Sarei curioso di vedere la struttura HTML.

Ad ogni modo se intendi procedere come hai già impostato, ti basta aggiungere color:white; anche sull'attributo style.

[danielepalmas88]

Volendo si potrebbe fare, però ritengo superfluo ad andare ad intaccare lo style.css di wordpress soltanto per venire incontro ad una mini-esigenza di un singolo link di un singolo post su migliaia. Per questo ho preferito optare per un più sbrigativo javascript.

Il tuo suggerimento sullo style color è risultato il tassello mancante. Ora è perfetto. Grazie infinite, gentilissimo!!
Buona giornata!

[ciro78]

Volendo si potrebbe fare, però ritengo superfluo ad andare ad intaccare lo style.css di wordpress soltanto per venire incontro ad una mini-esigenza di un singolo link di un singolo post su migliaia. Per questo ho preferito optare per un più sbrigativo javascript.

Il tuo suggerimento sullo style color è risultato il tassello mancante. Ora è perfetto. Grazie infinite, gentilissimo!!
Buona giornata!

Ciao,
ti invito a leggere il regolamento e in particolare l'utilizzo dei tag code per il codice.
ps. è letteralmente un abominio usare js per un effetto hover su un link.
bastava un css custom e una classe definita in esso

[danielepalmas88]

Okay

[danielepalmas88]

Edit: RISOLTO

[KillerWorm]

Ho visto ora che hai risolto ma posto comunque la risposta alla domanda da te cancellata

Chiedo scusa, un'ultimissima domanda... Se volessi abbinare due differenti funzioni all'interno dello stesso evento, come dovrei fare?

onMouseOver="this.style.cursor='pointer'"
onMouseOver="this.style.color='blue'"

Se li metto entrambi completi così, funziona solo il primo evento. Ho provato a mettere un punto e virgola alla fine del primo, e non ripetere la dicitura onmouseover= ma non funziona ugualmente...

Bah.. potrebbe essere così

onMouseOver="this.style.cursor='pointer'; this.style.color='blue'"

oppure mettere cursor: pointer sempre sull'attributo style (il risultato è sostanzialmente identico).
Il tag <a> dovrebbe comunque avere cursor: pointer di default... a meno che non sia stato resettato da qualche css di wordpress.

Ad ogni modo concordo pienamente con Ciro. Questo è un modo barbaro di gestire la cosa.

Non so poi come tu abbia risolto ma, come già ti ha indicato Ciro, un modo più consono è quello di usare una semplice classe su quell'elemento, una cosa tipo:

<h2><a href="#" class="link_evidenziato">CLICCA QUI</a></h2>

quindi usare uno dei vari plugin disponibili, ad esempio vedi qui, per aggiungere un css personalizzato solo per quel post, e definire il tuo bel css per tale classe:

a.link_evidenziato{
  position:absolute;
  top:500px;
  left:500px;
  font-size: 3rem;
  color: #fff;
  cursor: pointer;
}
a.link_evidenziato:hover{
  color: #00a;
}

PS: questo mi era sfuggito prima, ma non si può vedere

<font size="7">CLICCA QUI</a></font>

a parte l'uso del tag font, che quantomeno in HTML5 non è più supportato, ma che ad oggi è comunque sempre meglio evitarlo a favore di un uso più sensato dei css... ma almeno aprire e chiudere i tag in modo corretto!?

[danielepalmas88]

Ti ringrazio. Mentre tu scrivevi avevo già risolto usando...
onMouseOver="this.style.cursor='pointer'; this.style.color='blue'"

...per poi editare...

Per quanto concerne il fatto di usare sempre il css piuttosto che javascript, sinceramente non capisco che differenza faccia. A meno che js non dia problemi di browser o sia poco amato dai search engines, io da ignorante preferirei tutta la vita aggiungere mezza riga di codice (js) piuttosto che creare una parte di css dedicata, ed eventualmente addirittura installarci un plugin. Si tratta di un banalissimo link in un post su migliaia. Per questo io credo che più leggero e semplice tengo wp con i suoi files, e meno problemi di futuri di incasinamento avrò. In ogni caso pure sui forum americani ho notato che bacchettavano gli utenti rei di chiedere il sistema js per fare quanto menzionato sopra. Tutti consigliavano css. Un motivo ci sarà. Ma per quanto mi riguarda, come detto, il metodo più rapido risulta js, quindi lo preferisco a priori (anche per una questione di ignoranza, visto che non sono pratico di css, e trovare una piccolissima stringa già pronta mi facilita non poco le cose).

In ogni caso ti ringrazio per la spiegazione su come avrei dovuto fare in css. Purtroppo non ero assolutamente in grado di scrivere niente del genere io da solo. Per questo, anche per non stressare voi su cose che ritengo siano piuttosto basilari, pensavo di accelerare il tutto optando per la mini stringa js.

Per quanto riguarda il tag font, infine, esiste un modo alternativo di scrivere font size=7"?
E poi perché non sarebbe chiuso correttamente? :O ho chiuso con </font> no?

P.S. Forse lo avrei dovuto premettere subito (ma magari in tal caso mi avreste mandato a cagare, invitandomi a leggere guide basilari, e non rispondendomi), ma sono uno alle primissime armi, autodidatta e senza competenze tecniche di base. So che ci sono dei libri di facilissima reperibilità, ma fintanto che riesco a non essere esageratamente banale o stressante, qualche volta preferisco sempre chiedere a voi del forum

[ciro78]

certo uso i fogli di stile (css)

.miaClasse {font-size:7px}

ma questo non è il luogo per discutere di css