Hallo,
suche hier um Rat, da ich das Problem nicht selbst lösen kann und schon einige Stunden vergebens versucht habe, eine Lösung zu finden:
Habe „flexboxen“ als Navigationselemente auf meiner Startseite.
Die „flex-items“ sollen bei „mouseover“ invers bzw. mit Hintergrundfarbe:schwarz sowie dann mit der Schriftfarbe:weiß dargestellt werden (da ansonsten nicht lesbar).
Mit
div a:hover {
background-color:#000;
color:#fff;
display:block;
}
gelingt mir dies nicht. Der “Rand” bleibt, ohne dass der hover-effekt mit der schwarzen Hintergrundfarbe ausgefüllt wird.
Mit
div:hover {
background-color:#ddd;
}
habe ich „das Problem“ behelfsmäßig gelöst, würde aber gerne die oben genannte Lösung wählen.
Kennt jemand eine Lösung? Würde mich freuen …
Hier die Grundlagen:
<div id="home">
<div></div>
<div></div>
<div></div>
</div>
#home {
text-align:left;
font-size:14px;
line-height:1.6;
display:flex;
flex-wrap:wrap;
margin:20px -10px;
}
#home div {
border:1px solid;
border-color:#dedede;
flex:1;
min-width:250px;
padding:20px 20px 0;
font-size:16px;
line-height:1.4;
margin:10px;
background-color:#fafafa;
}
#home div a {
color:#000;
text-decoration:none;
}
#home div:hover {
background-color:#ddd;
}
#home div h2 {
font-size:18px;
}
Habe dann auch noch das Problem, dass ich zwei a:href-links wegen einer Aufteilung von h2-Elementen und content innerhalb eines flexitems nutze. Diesbezüglich würde ich allerdings auf <strong> „umsteigen“ und nur noch einen Link nutzen, falls eine Lösung nur so möglich sein sollte. Würde allerdings auch gerne die h2-Ausweisung weiter nutzen.
Grüße
Sönke
p.s.: ein Link zur "Problemseite": http://www.rechtsanwalt-und-sozialrecht.de