CSS a:hover-Bild Grenzen

Ich habe eine Reihe von verknüpfte Bilder in einer Tabelle mit einigen Polsterung. Wenn ich versuche, um eine img:hover oder a:hover border-Attribut, wenn die Grenze angezeigt wird, bewegt sich alles über durch die Menge der Pixel, die die Grenze dicht ist. Gibt es eine Möglichkeit, dieses Verhalten beenden?

InformationsquelleAutor AKor | 2010-11-16

  1. 22
    img {
    border: solid 10px transparent;
}
img:hover {
    border-color: green;
}
    Haben, die Ihr problem lösen?
    mein problem gelöst, vielen Dank!
    Können Sie Kennzeichnen diese als die richtige Antwort, und dann?

    InformationsquelleAutor Brandon Durham

  2. 1

    Das problem ist, dass Sie hinzufügen einen Rand um das element, das nimmt Platz - die anderen Elemente auf der Seite zu verschieben, um mehr Platz zu schaffen.

    Die Lösung ist das hinzufügen einer Grenze, die dem hintergrund entspricht, und dann ändern Sie einfach die Farbe oder styling auf hover. Eine weitere Möglichkeit ist die box größer, als Sie es ursprünglich beabsichtigt war, und dann ändern Sie es an den Rahmen angepasst, das Sie hinzufügen.

    InformationsquelleAutor derekerdmann

  3. 1
    img:hover {
  border: solid 2px red;
  margin: -2px;
}

    Scheint zu funktionieren für mich (Safari 6.0.5). Keinen zusätzlichen Platz, da die Grenze gezogen auf die "Innenseite" der img.

    InformationsquelleAutor akauppi

Schreibe einen Kommentar