Wie kann ich den Hintergrund mit einem Mouse Over austauschen? [HTML, CSS & Javascript Anleitung]

von | Jul 10, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS - HTML - Javascript

Inhaltsverzeichnis

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert