Hover-Effekt: Wie du mit einem simplen CSS Code die Webseiten-Elemente beim Mouseover veränderst

Wenn du viel Wert auf ein edles Design und die Optimierung der Usability deiner Webseite legst, dann kommst du zwangsläufig nicht an Mouseover-Effekten bzw. der :Hover CSS Eigenschaft vorbei. Du kannst mittels einem kleinen CSS Code Änderungen an deinen bestehenden Webseiten-Elementen vornehmen lassen, wenn jemand mit der Maus darüber fährt (nicht klickt).

In diesem Short-Tutorial erkläre ich dir, wie über die Custom CSS Funktion (Eigene CSS Styles) im FunnelBuilder von FunnelCockpit ganz einfach mittels der CSS Eigenschaft "Hover" bestehende Elemente beim Mouseover verändern kannst.

CSS TUTORIAL

Mit Hover CSS Eigenschaft beim Mouseover Styles ändern

Um dein gewünschtes Element im FunnelBuilder beim Mouseover zu verändern, musst du zunächst die Element-ID kopieren. Im FunnelBuilder klickst du dazu neben dem jeweiligen Element auf das Fingerabdruck-Symbol. Sobald du dort drauf geklickt hast, wird automatisch die ID des Elements in die Zwischenablage kopiert. Als nächstes klickst du im FunnelBuilder oben in der Symbolleiste auf "Styling" und scrollst zur Box "Eigene CSS Styles". Dort fügst du nun an einer freien Stelle die Element-ID ein.

Als nächstes müssen wir definieren, dass wir die CSS Einstellungen beim Mouseover ändern wollen. Dazu fügst du der Element-ID ein :hover an (siehe Beispiel unten). Anschließend müssen wir durch { die CSS Eigenschaft konfigurieren und anschließend durch } wieder schließen.

Du kannst bei der CSS Eigenschaft :Hover sämtliche CSS Einstellungen verändern, sodass du die komplette Gestaltungsfreiheit hast. In diesem Beispiel haben wir einen blauen Button erstellt und möchten ihn beim Mouseover gerne so ändern, dass die Hintergrundfarbe (background) weiß ist und die Schrift (color) Blau. Dazu habe ich den folgenden CSS Code verwendet: 

background:#ffffff!important;color:#5d9ffb!important;

 

Fahr mit der Maus darüber, um das Ergebnis zu sehen.

 

Vollständiger CSS Code für Mouseover (mit Element-ID):

#element-ab5KSzJo.btn:hover{background:#ffffff!important;color:#5d9ffb!important;}

Klicke auf den Code, um ihn in die Zwischenablage zu kopieren. Ersetze die Element-ID durch deine Eigene.