باز کردن تب های المنتور با ماوس هاور به جای کلیک

المنتور در نسخه های جدید خود از ویجت کاربردی Tabs رونمایی کرده است. که دیگر نیاز به نصب افزونه های جانبی دیگر مثل Essential Addons for Elementor نیست. و شما می توانید به راحتی در المنتور تب های خود را ایجاد کنید.

اما مشکل بزرگی که این ویجت دارد. برای عوض کردن تب ها حتما باید کلیک کنید. و قابلیت Hover کردن ندارد. سئوجان نحوه رفع این مشکل را در این پست به شما آموزش می دهد.

1. ابتدا از لیست ویجت ها المنتور Tabs را انتخاب و به صفحه اضافه می کنیم مثلا میخوایم با آن یک مگامنو بسازیم

2. سپس از لیست ویجت ها HTML را به صفحه اضافه می کنید. بالاتر از ویجت تب ها باشد. فقط فراموش نکنید که ویجت HTML را از طریق بخش واکنش گرا در همه دستگاها مخفی کنید.

3- مطابق با ورژن المنتور خود قدیمی یا جدید یکی از کدهای زیر را انتخاب و در ویجت HTML قرار دهید.

کد برای المنتور جدید

<script>
/* Code from https://seojan.com/8451/elementor-open-tabs-on-hover-instead-of-click/
* Version 1.0
* Copyright 2023 Seojan
*/
document.addEventListener('DOMContentLoaded',function(){
jQuery(function($){
$('.hoverTabs .e-n-tab-title').mouseenter(function(){
$(this).click();
});
});
});
</script>

کد برای المنتور قدیمی

<script>
/* Code from https://seojan.com/8451/elementor-open-tabs-on-hover-instead-of-click/
* Version 1.0
* Copyright 2023 Seojan
*/
document.addEventListener('DOMContentLoaded',function(){
jQuery(function($){
$('.hoverTabs .elementor-tab-desktop-title').mouseenter(function(){
$(this).click();
});
});
});
</script>

4. سپس به تنظیمات تب ها قسمت پیشرفته بروید در قسمت شناسه های CSS کلاس hoverTabs را به آن بدهید.

پس از تعریف کلاس برای تب ها مشاهده می کنید به راحتی تب های شما با هاور ماوس جابجا می شوند.

همچنین می توانید از کد زیر برای افزودن افکت به تب ها نیز استفاده کنید. فقط کافیست کد از قسمت سفارش سازی قالب یا بخش نمایش / سفارش سازی وردپرس به بخش CSS اضافی، اضافه کنید.

<style>
.hoverTabs .e-n-tabs-content .e-con.e-active {
    animation: fadeInTabs 0.8s ease forwards;
}
@keyframes fadeInTabs{
0% {
 opacity:0;
}
100% {
 opacity:1;
}
}
</style>