bordo delle immagini con a:hover

[devil89]

Vorrei fare in modo che al passaggio del mouse sopra un'immagine linkata, venga fuori il bordo.

Le ho provate tutte ma non mi viene.

Allora vorrei che normalmente l'immagine linkata non avesse bordo..allo stato hover (il mouse si posiziona sopra all'immagine) comparisse un bordo di un 1px blu. +

Come faccio?

Grazie

[devil89]

Quello che mi funziona meglio, ma al contrario , è questo:

CSS:

a.link img {
  border: 1px solid;
  margin: 1px;
}
a.link:link img, a.link:visited img, a.link:active img {
  border-color: #083194;
}
a.link:hover img {
  border: 0px solid;
}

HTML con immagine linkata:

<a href="url pagina" class="link">
     [img]image.gif[/img]
</a>

Purtroppo questo mostra attorno all'immagine il bordo di 1px e quando il mouse passa sparisce.

Io voglio il contrario....

[indigoindigo]

Dai un'occhiata qua per vedere se risolvi:

http://www.w3.org/TR/CSS21/selector....pseudo-classes

comunque, per darti un'idea

a.link img, a.link:visited img{....}
a.link:hover img{....}

dovrebbe andare (anche se sono un pochino arrugginito)..

[salasir]

Originariamente inviato da devil89
Quello che mi funziona meglio, ma al contrario , è questo:

CSS:

a.link img {
  border: 1px solid;
  margin: 1px;
}
a.link:link img, a.link:visited img, a.link:active img {
  border-color: #083194;
}
a.link:hover img {
  border: 0px solid;
}

...
Purtroppo questo mostra attorno all'immagine il bordo di 1px e quando il mouse passa sparisce.

Io voglio il contrario....

Se definisci il border su :link e border:0; su :hover funziona come dici. Inverti le definizioni:

a.link img {
  border: 0px  solid;
  margin: 1px;
}
a.link:link img, a.link:visited img, a.link:active img {
  border: none;
}
a.link:hover img {
  border: 1px  solid #083194;
}

Tieni presente, però, che se inserisci un border che prima non c'era, l'immagine "cresce" di dimensioni e ottieni on effetto non proprio gradevole. Forse si risolve inserendo un margin:0; sull':hover e margin:1px; su :link.

[devil89]

Mi dispiace ma non funziona.

Ho usato questo codice CSS:

a.link img {
  border: 0px solid;
  margin: 1px;
}
a.link:link img, a.link:visited img, a.link:active img {
  border: none;
}
a.link:hover img {
  border: 1px solid #000000;
}

HTML:

<a href="url" class="link">
              [img]img/image010.gif[/img]
</a>

Il bordo non c'è (ed giusto fino a qua) ma al passaggio del mouse non viene fuori.


Come faccio?

[devil89]

up

[Another-Life]

??Risolto??

[osvi]

Originariamente inviato da devil89

a.link:hover img {
  border: 0px solid;
}

OT
scusa perchè metti "px" dopo lo 0?
0 è 0, sia che siano em che px che altro così come il solid che segue


(campagna promozione CSS puliti e corretti)

[devil89]

non ho ancora risolto.
E sembra un problema molto diffuso

[Another-Life]

Originariamente inviato da osvi
OT
scusa perchè metti "px" dopo lo 0?
0 è 0, sia che siano em che px che altro così come il solid che segue


(campagna promozione CSS puliti e corretti)

..."Cosi come il solid che segue"....in che senso??