CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden

[ebody]

Hallo,

bei :hover verwende ich font-weight: bold. Dadurch wird die umgebene Box vergrößert. Diese soll aber gleich bleiben. Die Box soll keine feste width, height Angaben haben, sondern durch padding ihre Größe erhalten.

https://codepen.io/ebody/pen/jObpaZx

Wie erreicht man es, dass die Box sich bei :hover nicht vergrößert?

Gruß ebody

[Rolf B]

Hallo ebody,

<div id="box">
  <div id="btn">Klick</div>
</div>

Du hast bestimmt gemeint

<div id="box">
  <button id="btn">Klick</button>
</div>

Den kannst Du so stylen, dass er wie dein div aussieht. Aber das löst dein Problem nicht.

Wenn sich der Button an die Größe des Texts anpassen soll, dann tut er das eben. Und wenn der Text sich verändert, ändert sich der Button mit.

Du könntest schauen, ob Du einen Font findest, dessen Dickten^[1] bei Änderung des font-weight gleich bleiben.

Abraten würde ich von Spielereien mit letter-spacing. Das geht in deinem Fall, mit letter-spacing:-1.2px bleibt die Breite visuell unverändert, aber wehe der Font ist nicht da oder irgendwelche andere Skalierungseffekte schlagen zu. Das ist zu spröde.

Eine Idee könnte sein, statt font-weight einen Schatten zu nutzen:

  #btn:hover{
     text-shadow: 0px 0px 2px #fff;
  }

Rolf

---

1. Nein, nicht diese. Sondern jene. ↩︎

[JürgenB]

Hallo,

denk bitte an die Tastaturbenutzer, wo hover steht, muss auch focus hin.

Wenn eine Box keine Breitenangabe hat, richtet sich ihre Größe nach dem Inhalt. Da fette Schrift meistens breiter ist als normale, hilft evtl. ein negatives letter-spacing:

    #btn:hover{
        font-weight: bold;
        letter-spacing:-.073em;
    }

Die -0.73em habe ich empirisch ermittelt, ob das bei anderen Schriftgrößen oder Zoomstufen funktioniert, weiß ich nicht.

Ich würde eine feste Breite für den Button nehmen und die Schrift zentrieren.

Gruß
Jürgen

[Der Martin]

Hi,

bei :hover verwende ich font-weight: bold. Dadurch wird die umgebene Box vergrößert. Diese soll aber gleich bleiben. Die Box soll keine feste width, height Angaben haben, sondern durch padding ihre Größe erhalten.

das ist IMO ein Widerspruch. Wenn du keine feste Größe angibst, richtet sich die tatsächliche Größe nach dem Platzbedarf des Inhalts, und fette Schrift ist nun einmal etwas breiter.

Wie erreicht man es, dass die Box sich bei :hover nicht vergrößert?

Eine Krücke fällt mir ein: Javascript. Lies nach dem Laden der Seite mit getComputedStyle() die tatsächliche Höhe und Breite des Elements, und setze die dann fest auf style.height bzw. style.width.

Alle Angaben ohne Gewähr.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Der,

kann man auch machen, aber dann sollte man etwas Zuschlag bei der Breite geben und text-align:center setzen, damit der Text Platz hat zum fetter werden.

Rolf

[ebody]

Wenn ich eine feste Größe vergebe und z.B. ein Menü erstelle, dann wären die Abstände aber alle unterschiedlich, weil die Textlänge der Menüpunkte unterschiedlich ist.

Ich müsste jeder Box von jedem Menüpunkt eine unterschiedliche Breite geben, so dass die Abstände immer gleich sind, zwischen den Menüpunkten.

Oder gibt es da eine einfache Lösung, um die Abstände automatisch gleich hin zu bekommen?

Gruß ebody

[Rolf B]

Hallo ebody,

wenn Du nur ein Fragment in den Ring wirfst, dann musst Du Dich nicht wundern, wenn Die Antwort nicht hilfreich ist.

Du möchtest ein Menü bauen bei dem die Menüpunkte untereinander stehen? Und die Menübuttons (oder Links, wenn's ein Menü ist) alle gleich breit sind?

Möglichkeit 1: Mein Vorschlag mit text-shadow statt font-weight. CSS Only, klappt ab IE 10, sollte sich fast überall einfügen.

Möglichkeit 2: In der JavaScript-Lösung die maximale Breite des Rahmen-DIV (bzw. ul) des Menüs bestimmen - das richtet sich ja nach dem breitesten Menüpunkt, etwas Zuschlag geben und das als Breite setzen.

Möglichkeit 3: Feste Breite vergeben und auf Kopfschmerzen verzichten.

Aber vielleicht passt das immer noch alles nicht, weil Du uns noch nicht alles verraten hast (z.B. Submenüs die aufgeblendet werden oder das ganze Menü ist ein Popup Menü).

Nachtrag: In der JS Lösung muss man gar keinen Zuschlag berechnen. Wenn der Container der Menüpunkte feste Breite hat, vergrößert sich zwar der Text, aber der Rahmen in dem er steht, bleibt fix.

Wenn die Navigations-Links untereinander in einem nav Element stehen: Einfach die Breite annageln.

let navigation = document.querySelector("nav");
if (navigation) {
   navigation.style.width = navigation.clientWidth + "px"
}

Rolf

[ebody]

Jo, die Info bzgl. horizontales Menü hätte ich direkt mitteilen sollen. Ich verzichte jetzt auf Bold, dennoch Danke für die Tipps.

Gruß ebody

[Gunnar Bittersmann]

@@ebody

Oder gibt es da eine einfache Lösung, um die Abstände automatisch gleich hin zu bekommen?

More input!

Die Menüpunkte sind horizontal angeordnet? Dann display: inline oder display: inline-block mit margin und/oder padding. Oder Flexbox.

Dann verbietet sich aber die Änderung der Schriftstärke bei :hover/:focus.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!