Heute möchte ich euch einen kleinen Effekt zeigen mit dem ihr eure Webseite ziemlich interessant gestalten könnt. Und zwar zeige ich euch heute in einem kleinen Beispiel wie ihr es schafft, dass sich eurer Hintergrund bei einem Mouse Over Effekt farblich anpassen lässt.
Stellt euch vor ihr habt eine kleine CSS Fläche definiert, ihr fährt mit der Maus darüber und zack hat der Webseitenhintergrund eine andere Farbe und ihr mit der Maus wieder wegfährt, dann ist weider die alte Farbe da.
Ja sowas kann man dann auch erweitern, wenn ihr einen Button CTA berührt oder wenn ihr eine andere Aktion ausführt oder oder oder
Der Fantasie sind eigentlich keine Grenzen gesetzt…
Video
HTML
1 2 3 4 5 6 | <div class="box">
<div class="container1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, odio?
</div>
<div class="container2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, neque.</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .box {
display:flex;
}
.container1 {
width: 200px;
height: 200px;
border: 1px solid #fff;
padding: 15px;
margin-right: 10px;
background-color: #fbf8f8;
}
.container2 {
width: 200px;
height: 200px;
border: 1px solid #fff;
padding: 15px;
background-color: #fbf8f8;
}
.bg1 {
background-color: #ff0000;
}
.bg2 {
background-color: #00ff00;
} |
Javascript
Nun erweitert ihr das CSS mit dem folgenden Code
1 | <div class="container1" onmouseover="document.body.classList.add('bg1')" onmouseout="document.body.classList.remove('bg1')"> |
1 | <div class="container2" onmouseover="document.body.classList.add('bg2')" onmouseout="document.body.classList.remove('bg2')"> |
0 Kommentare