• Elementor

  Elementor Hover Coloum Backround

  Bu yazı Barış Çağman tarafından oluşturuldu 22/05/2023 at 14:14

  Elementor ile kullanımı,

  1. 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,
  2. 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,
  3. her sütüna .column-1,2,3 ve 4 olarak Class tanımlaması ile açıyoruz,
  4. hangi sütünda hangi resim gelecek ise URL ayarlarını ekliyoruz,
  5. 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>

  Barış Çağman cevapladı 2 yıllar önce 1 Üye · 0 Cevap
• 0 Cevap

Giriş Yap ve Yanıtla