Ich möchte jetzt einen Rahmen bei Hover auf einer Schaltfläche implementieren.
Diese Taste befindet sich in einem Div zusammen mit 3 anderen Tasten. Sobald ich jedoch darüber schwebe, wird der Rahmen angezeigt, aber gleichzeitig vergrößert der Button auch die Größe des hinzugefügten Rahmens, was ich nicht im Sinn habe.
Ich machte eine Fiedel, um das Problem zu demonstrieren: Klick mich
Ich habe hier etwas über dieses Thema gelesen und tatsächlich eine Lösung gefunden, indem ich margin-top: 3px; hinzugefügt habe.
zu den Hover-Klassen aber, die den Button "quetschen", was ich nicht will.
Stattdessen möchte ich, dass die Schaltfläche nicht komprimiert oder so aussieht, sondern einfach mit einem 4px-Rahmen, der die oberen 4 px der Schaltfläche überlagert.
Irgendwelche Ratschläge?
Vielen Dank im Voraus
Sie könnten stattdessen einen Box-Schatten verwenden, da dies die Positionierung nicht beeinflusst:
Style deine Taste, um vertical-align zu top zu haben. Fügen Sie am Ende Ihres CSS den folgenden Stil hinzu:
vertical-align | MDN
Versuchen Sie zu verstehen, was passiert.
Sie möchten, dass Schaltflächen nicht gedrückt werden, sondern dass ein Rahmen oben hinzugefügt wird.
Anfangs war Ihre Schaltfläche height 25px und border war 1px .
Beim Schweben bleibt Ihre height gleich, aber die border wird um 3px erhöht, wodurch Ihre Schaltfläche gedrückt wird.
Lösung :
Hover : height muss erhöht werden, um erhöhte border ( 4px-1px = 3px ) aufzunehmen ( um die Schaltfläche nicht zu drücken) .
Wenn Sie dies nur tun, werden Sie feststellen, dass der Knopf nach unten schaltet.
Um dies zu vermeiden, fügen Sie margin of 4-1 = 3px zu Ihrer functionButton class hinzu, um die erhöhte height zu kompensieren.
Fügen Sie in margin eine 3px von - hover class hinzu, da height bereits um 3px erhöht ist.
Verwenden Sie folgende CSS, die ich einige Änderungen in Ihrem CSS vorgenommen habe und wie es nach Ihren Anforderungen funktioniert, versuchen Sie Folgendes:
%Vor%Tags und Links javascript html jquery css css3