[HTML] creare link con colori Hover diversi, possibile?

Discussione in 'HTML e CSS' iniziata da Sermatth72, 11 Febbraio 2018.

  1. Sermatth72

    Sermatth72 Nuovo Utente

    Registrato:
    2 Gennaio 2018
    Messaggi:
    13
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Occupazione:
    Lavori saltuari
    Località:
    Sicilia
    Ho bisogno di creare 3 serie di links di colore "Hover" diverso, una serie per quelli nell'articolo di una pagina, e le altre due serie mi servirebbero: una per il menu laterale e l'altra per i link a fondo pagina (Chi siamo | FAQ | Contattaci" etc.)

    Qualcuno sa dirmi come si fa?! :confused: Grazie!
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.011
    Mi Piace Ricevuti:
    225
    Punteggio:
    63
    Sesso:
    Maschio
    Ciao
    Allora non vedendo niente del tuo codice e della tua pagina vado un po' a naso
    Se i link in partenza hanno tutti lo stesso colore, dovresti creare tre classi esempio:
    HTML:
    hover.link1 {color:blue;}
    hover.link2 {color:red;}
    hover.link3 {color:yellow;}
    Poi assegni le classi alle tre serie di link
     
  3. iTonto

    iTonto Utente Attivo

    Registrato:
    8 Febbraio 2018
    Messaggi:
    76
    Mi Piace Ricevuti:
    1
    Punteggio:
    8
    Non è il contrario?

    HTML:
    .link1:hover, .link1:focus {color: blue;}
    
    ecc...
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.011
    Mi Piace Ricevuti:
    225
    Punteggio:
    63
    Sesso:
    Maschio
    si chiedo scusa ha ragione @iTonto
    Codice giusto:
    HTML:
    .link1:hover {color:blue;}
    .link2:hover {color:red;}
    .link3:hover {color:yellow;}
    Chissa dove avevo la testa (mi sono cosparso il capo di cenere)
     
  5. iTonto

    iTonto Utente Attivo

    Registrato:
    8 Febbraio 2018
    Messaggi:
    76
    Mi Piace Ricevuti:
    1
    Punteggio:
    8
    Succede :)
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.011
    Mi Piace Ricevuti:
    225
    Punteggio:
    63
    Sesso:
    Maschio
    Piccolo e veloce esempio
    HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    html {
        padding: 0;
        margin: 0;
        background: #FFFFFF;
    }
    body,td,th {
        font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif;
        font-size: 13px;
        color: #000000;
    }
    body {
        width: 980px;
        margin: 0 auto;
        padding: 0;
    }
    a {
        color: #000DFF;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #000DFF;
    }
    a:hover {
        text-decoration: none;
        color: #0E8F00;
    }
    a:active {
        text-decoration: none;
        color: #000DFF;
    }
    .header {
        background-color: #D0D0D0;
        margin: 0px;
        padding: 20px;
        height: 100px;
        width: 938px;
        border: 1px solid #000000;
    }
    .menu {
        background-color: #FFEAEA;
        margin: 0px;
        padding: 20px;
        float: left;
        height: 100%;
        width: 200px;
        border: solid 1px #000000;
    }
    .menu ul li a:hover {
        color: #A8A700;
    }
    .contenuto {
        background-color: #FFDDA7;
        float: left;
        margin: 0px;
        padding: 30px;
        height: 100%;
        width: 678px;
    }
    .contenuto .artcolo:hover {
        color: #FF0004;
    }
    #box {
        margin: 0px;
        padding: 0px;
        height: 600px;
        width: 980px;
    }
    #clear {
        clear: both;
    }
    #footer {
        background-color: #DFFFFB;
        margin: 0px;
        padding: 30px;
        height: 110px;
        width: 920px;
    }
    #footer a:hover {
        color: #000000;
    }
    </style>
    </head>
    
    <body>
    <div id="box">
      <div class="header">
        Inserite qui il contenuto per  class "header" <br> <br>
        <a href="#" target="_self">questo è un link</a>
      </div>
      <div class="menu">
        <ul>
          <li><a href="#" target="_self">Link 1</a></li>
          <li><a href="#" target="_self">Link 2</a></li>
          <li><a href="#" target="_self">Link 3</a></li>
          <li><a href="#" target="_self">Link 4</a></li>
          <li><a href="#" target="_self">Link 5</a></li>
          </ul>
      </div>
      <div class="contenuto">
        Inserite qui il contenuto per  class "contenuto"<br><br>
        <a class="artcolo" href="#" title="articolo" target="_self">Questo è un link articolo</a>
      </div>
      <div id="clear"></div>
      <div id="footer">
          Inserite qui il contenuto per  id "footer"<br><br>
          <a href="à" title="Link" target="_self">Link del footer</a>
      </div> 
    </div>
    </body>
    </html>
     
  7. Sermatth72

    Sermatth72 Nuovo Utente

    Registrato:
    2 Gennaio 2018
    Messaggi:
    13
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Maschio
    Occupazione:
    Lavori saltuari
    Località:
    Sicilia
    Appena posso provo e vi faccio sapere Grazie infinitamente a entrambi !!!
     
Sto caricando...

Condividi questa Pagina