Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?
Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.
Hier der Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
<style>
.box {
position: relative;
margin-top: 50px;
width: 200px;
height: 75px;
background-color: transparent;
border-radius: 15px;
border: 3px solid lightgreen;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Ubuntu';
transition: all 0.5s ease-in-out;
z-index: 1;
}
.box:hover {
color: white;
}
.box::after{
position: absolute;
left: 0;
content: '';
background-color: lightgreen;
width: 0;
height: 75px;
border-radius: 11px;
transition: all 0.5s ease-in-out;
z-index: 0;
}
.box:hover::after{
width: 200px;
}
</style>
</head>
<body>
<div class="box">Hello</div>
</body>
</html>
3 Antworten
Hi Robin808,
dein Code sieht sehr interessant aus und bietet noch an einigen Potenzial. Ich habe auch dein Problem beim zweiten mal durchlesen und testen gefunden. Dein Problem liegt darin, das dein ::after-Pseudoelement das deine Hintegrundfarbe animieren soll, einen zu niedrigen z-index-Wert als der Text hat. Normalerweise überlagert es aber trotzdem, da du keinen z-index-Wert für das .box-Element geschrieben hast.
Du kannst für den ::after den z-index auf -1 setzen und den für die .box auf 1. Dann müsste es klappen.
Viel Erfolg
Ich habe gerade selber eine Lösung gefunden: Man kann einfach noch in dem <div> ein <span>-Element erstelle, bei dem man dann z-index einstellen kann.
Du setzt bei Hover keine Hintergrundfarbe. Du setzt einfach nur die Textfarbe auf Weiß.
Eine Lösung könnte so aussehen, dass du ein Pseudoelement mit einer Hintergrundfarbe ausstattest und bei Hover über die Fläche seines Containers ziehst. Der Buttontext selbst sollte in einem eigenen Element liegen, welches relativ zu seinem Container positioniert wird.
HTML:
<div class="btn" role="button" tabindex="0">
<span>Hover Me</span>
</div>
Um die Box als Schaltfläche auszuzeichnen, gebe ich ihr eine entsprechende Rolle und mache sie zugänglich für die Bedienung via Tastatur (tabindex).
CSS:
.btn {
background: white;
color: white;
display: inline-block;
position: relative;
}
.btn::before {
background: linear-gradient(to right, #ff758c, #ff7eb3);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.5s ease-in-out;
width: 0;
}
.btn:hover::before,
.btn:focus::before /* for keyboard control */ {
width: 100%;
}
.btn span {
position: relative;
}