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

Sermatth72 · 11 Feb 2018

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?!

Grazie!

Max 1 · 11 Feb 2018

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

iTonto · 11 Feb 2018

Non è il contrario?

HTML:

.link1:hover, .link1:focus {color: blue;}

ecc...

Max 1 · 11 Feb 2018

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)

iTonto · 12 Feb 2018

Succede

Max 1 · 12 Feb 2018

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>

Sermatth72 · 16 Feb 2018

Appena posso provo e vi faccio sapere Grazie infinitamente a entrambi !!!

Cerca

Cerca

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

Sermatth72

Nuovo Utente

Max 1

Super Moderatore

iTonto

Utente Attivo

Max 1

Super Moderatore

iTonto

Utente Attivo

Max 1

Super Moderatore

Sermatth72

Nuovo Utente

Discussioni simili