Stile hover in linea

**mrl4n69** · 15-03-2016, 17:11

Ciao, sto cercando di inserire una regola css in linea per definire lo stile hover in una pagina html collegata ad un .css esterno

Ho 4 linee identiche, ma ognuna si deve comportare in modo diverso: al passaggio del mouse sulle icone devo avere 4 colori diversi (da qui la necessità di inserire lo style in linea)

codice HTML:

<a class="square" style="font-size:50px; text-decoration: none; color:black; margin-right:30px;" title="" target="_blank" href="#"></a>

Tutte le prove che ho fatto sono assolutamente indifferenti ai browser, per cui funziona solo il link e nulla cambia colore.

**carlomarangoni** · 15-03-2016, 17:32

Puoi assegnare 4 id diversi ai 4 <a> emettere nel foglio di stile esterno le regole hover per i 4 id

**mrl4n69** · 15-03-2016, 17:34

E se non potessi modificare il foglio esterno, perchè non ho accesso al server che lo ospita?

**carlomarangoni** · 15-03-2016, 17:54

Fai uno stile nella pagina prima della chiusura del tag <head>

**mrl4n69** · 15-03-2016, 18:00

Non sapevo di poter far leggere 2 fogli diversi alla stessa pagina...

quanta ignoranza...

per cui io posso dare una cosa del tipo

codice HTML:

<a class="square" id="...">

E risolvere il mio problema? Provo subito...

Grazie, ti faccio sapere

**mrl4n69** · 15-03-2016, 21:46

Se la dichiarazione

codice HTML:

<style type="text/css">
.id prova:hover { color: black;
}
</style>

è corretta, modificando la mia riga come

codice HTML:

<a class="square" id="prova" style="font-size:50px; text-decoration: none; color:black; margin-right:30px;" title="" target="_blank" href="#"></a>

non succede assolutamente nulla

EDIT: Ho provato anche qualcosa del tipo

codice HTML:

a.square:hover { color: black; }

con lo stesso risultato

**KillerWorm** · 15-03-2016, 22:01

Se la dichiarazione

è corretta, modificando la mia riga come

Ciao, quel codice, scritto in quel modo, non è corretto. Il selettore con nome id deve essere specificato anteponendo il carattere cancelletto al nome id (#prova) e non come hai scritto (.id prova).

Ad ogni modo lo pseudo-selettore :hover non è possibile applicarlo sul css in linea (cioè nell'attributo style sul tag).

Questo invece è corretto

codice:

a.square:hover { color: black; }

A me funziona. Tu esattamente cosa ti aspetti che faccia?

Ovviamente va dichiarato opportunamente dentro il tag style sull'head o nel foglio di stile.

Bisogna inoltre verificare che non ci sia altro css che influenzi il comportamento di quella regola.

**mrl4n69** · 15-03-2016, 22:02

Semplicemente al passaggio del mouse l'oggetto con quell'id dovrebbe cambiare colore.

La situazione è, a mio parere complessa. La pagina legge un foglio .css esterno che non posso modificare, una dichiarazione locale dentro <head> e una dichiarazione in linea come da esempio.

**KillerWorm** · 15-03-2016, 22:56

Semplicemente al passaggio del mouse l'oggetto con quell'id dovrebbe cambiare colore.

Dal codice che hai postato, il colore dovrebbe cambiare da black a black

mi sfugge qualcosa.. ma in quel caso è normale che non vedi risultati.

La situazione è, a mio parere complessa. La pagina legge un foglio .css esterno che non posso modificare, una dichiarazione locale dentro <head> e una dichiarazione in linea come da esempio.

Non vedo la complessità.
Ad ogni modo, capisco il foglio esterno che non puoi modificare, ma perché usare del css in linea?
Converrebbe mettere tutto dentro la dichiarazione nell'head così da organizzare meglio il tutto.

Posto un esempio pratico, magari ti può servire per prendere spunto e capire come andare avanti nel tuo progetto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
       a.square { /* qui la dichiarazione dello stato normale di questo elemento */
        font-size: 50px;
        text-decoration: none;
        color: black;
        margin-right: 30px;
      }
      a.square:hover {
        color: blue; /* qui il colore che deve assumere su hover, ovviamente diverso da quello specificato sopra */
      }
    </style>
  </head>
  <body>
    <a class="square" id="prova" title="" target="_blank" href="#">prova link</a>
  </body>
</html>

**carlomarangoni** · 15-03-2016, 23:08

Originariamente inviata da KillerWorm

........

Non può usare

codice:

a.square:hover {
        color: blue; /* qui il colore che deve assumere su hover, ovviamente diverso da quello specificato sopra */

perchè avrebbe lo stesso colore di hover su tutti e 4 i link bisogna che dia ad ogni link un id e usi quello

Discussione: Stile hover in linea

Strumenti discussione

Ricerca discussione

Visualizza

Stile hover in linea

Permessi di invio