• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hover Effekt mit derselben Größe

Catalina

Neues Mitglied
Hallo, ich habe ein Hover Effekt bei innerhalb einer Flexbox in flix-item gebaut - funktioniert auch alles aber ich würde gerne das der hover effekt immer dieselbe größe hat... leider bin ich bis jetzt noch auf keine lösung gekommen. Danke schon mal im voraus für eure Hilfe. Hier der Quelltext den ich erstellt habe:

.flex-container { display: flex; flex-wrap: wrap;
}

.flex-item { width: 160px; margin: 5px; text-align: center; line-height: 20px; /*Abstand innerhalb der Schrift*/ font-size: 14px; font-family: Verdana;
}
.flex-item :hover
{ background:#eee

}

-----

Mit width und height angaben komme ich da irgendwie nicht weiter......
also das Ziel soll so aussehen das der hover effekt gleich gross ist wie ein viereck wo man die größe dann selber bestimmen kann
 
Zuletzt bearbeitet:

m.scatello

Senior HTML'ler
Mit den paar Zeilen CSS-Code kann man dir nur schwer helfen. Ein Link zur Seite wäre nicht schlecht.
 

Sempervivum

Senior HTML'ler
Ich bin mir nicht richtig sicher, ob ich das mit der selben Größe richtig verstehe. Versuche, ob dies CSS den Effekt bringt, den Du dir vorstellst:
Code:
.flex-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
So ist die Hinterlegung immer gleich groß und zwar so groß wie das Flex-Item.
 

Catalina

Neues Mitglied
das hat geklappt habe es zwar noch umgeschrieben
.flex-item :hover
{
background-color: #eee;
display: inline-block;
width: 100%;
height: 100%;

}
aber funktioniert jetzt wie ich mir gedacht habe !!!! DANKE FÜR DIE HILFE !
 
Werbung:
Oben