Elementor Tabs auf Mouseover öffnen

Ich zeige dir, wie du die Tabs im Elementor Tabs widget per Mouseover öffnen lassen kannst.

Weiterlesen: Elementor Tabs auf Mouseover öffnen

Hier kannst du dir das Ganze auch als Video ansehen:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Das Tabs Widget setze ich immer wieder für unterschiedliche Zwecke ein. Hin und wieder macht es Sinn, wenn man die Tabs auf mouseover öffnen lassen könnte. zB. wenn man pro Tab nur wenig Inhalt wie zB. ein Foto anzeigen lässt.

Das ist mit einem kleinen Script ganz einfach realisierbar.

Füge ganz einfach unter dein Tabs widget ein HTML widget ein und füge darin folgenden Code ein:

<script>
/* Code by https://blog.andreas-stricker.at  */
jQuery(document).ready(function($) {
    $('.tabs-mouseover .e-n-tab-title').hover(function() {
        $(this).click();
    });
});
</script>

Alternativ kann man das Script statt in einem html widget auch über Elementor -> Custom Code einfügen

Und schon reagieren die Tabs, wenn der User mit der Maus über die Tabs fährt.

Auf meinem Youtube-Kanal findest du übrigens noch viele weitere Videos zu Elementor!