-
Elementor Hover Coloum Backround
Elementor ile kullanımı,
- Div etiketine sahip bir tek sütünü bölüm açıp, içerisinde iç 3-4 sütün isteğe bağlı sütün açıp class kodunu bg-inner-section olarak tanımlıyoruz,
- iç bölüm olarak eklenen içerisinde sütün olan olan div iç bölüme varsayılan olarak gelecek arkaplan resmini ekliyoruz, sütün üzerine gelmediğinde görünecek resim olarak,
- her sütüna .column-1,2,3 ve 4 olarak Class tanımlaması ile açıyoruz,
- hangi sütünda hangi resim gelecek ise URL ayarlarını ekliyoruz,
- sonrasında kod ile paylaştığım JS Ekleyerek çalışmasını sağlıyoruz.
Örnek: https://barcag.com/hover-coloum-backround
JS KOD:
<script>
// Column 1
jQuery(".column-1").hover(function(){
jQuery('.bg-inner-section').css("background-image", "url(image-url)"); // Change url
}, function(){
jQuery('.bg-inner-section').css("background-image", ""); // Change url
});
// Column 2
jQuery(".column-2").hover(function(){
jQuery('.bg-inner-section').css("background-image", "url(image-url)"); // Change url
}, function(){
jQuery('.bg-inner-section').css("background-image", ""); // Change url
});
// Column 3
jQuery(".column-3").hover(function(){
jQuery('.bg-inner-section').css("background-image", "url(image-url)"); // Change url
}, function(){
jQuery('.bg-inner-section').css("background-image", "");
});
// Column 4
jQuery(".column-4").hover(function(){
jQuery('.bg-inner-section').css("image-url)"); // Change url
}, function(){
jQuery('.bg-inner-section').css("background-image", "");
});
</script>
Üzgünüz, yanıt bulunamadı.
Log in to reply.