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

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse