0

I am creating a Wordpress website. I am displaying posts with a query. This is the output HTML:

<div class="row no-gutters przewodnik-wstep kroki-border row-change-background">
    <div class="col-xl-1 jasne-tlo">
    </div> 
    <div class="col-xl-4 przewodnik-tytul green-background obszar-change-background">
        <h3 class="krok text-center materialy-tytul"><?php the_field('nazwa_obszaru_na_stronie_kroku') ?></h3>
    </div>
    <div class="col-xl-6 jasne-tlo przewodnik-tekst krok-1">
        <div class="opis-kroku">
        <?php the_field('zajawka_na_stronie_kroku'); ?>
        </div>
        <a href="<?php echo esc_url(get_field('link_na_stronie_kroku')); ?>"><button class="button-dark czytaj-dalej change-background"><?php the_field('przycisk_na_stronie_kroku'); ?></button></a>
    </div>
    <div class="col-xl-1 jasne-tlo">
    </div>
    </div>

What I need to acheve is that

<div class="col-xl-4 przewodnik-tytul green-background obszar-change-background">

changes background (from background-color to background-image) when <button class="button-dark czytaj-dalej change-background"> is hovered.

I have managed to add id, to <div class="row no-gutters przewodnik-wstep kroki-border row-change-background"> to be able to target div and button but I don't know how to use it in getElementsByClassName(). My JS code:

$(".row-change-background").each(function(i) {
  $(this).attr("id", "row-change-background" + i);
});

  $(".row-change-background button").hover(function(){
    $(".row-change-background .obszar-change-background").css("background-image", "url(../wp-content/themes/twentytwenty-child/img/KDK_MARBLING_TLO1.png)");
    $(".row-change-background .obszar-change-background").css("background-size", "cover");
    $(".row-change-background .obszar-change-background").css("background-repeat", "no-repeat");        
    }, function(){
    $(".row-change-background .obszar-change-background").css("background-color", "#c6e4cc");
    $(".row-change-background .obszar-change-background").css("background-image", "none");  
  });

Obviously now all <div class="col-xl-4 przewodnik-tytul green-background obszar-change-background"> are changing background at the same time on hover.

buzatto
  • 9,704
  • 5
  • 24
  • 33
KasiaW
  • 55
  • 10
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – ikiK Feb 20 '21 at 18:45

1 Answers1

1

Use this to get the hovered element specifically, then closest to get the parent row .row-change-background, then find to get the div .obszar-change-background.

  $(".row-change-background button").hover(function(){
    var selected = $(this).closest(".row-change-background").find(".obszar-change-background");
    selected.css("background-image", "url(../wp-content/themes/twentytwenty-child/img/KDK_MARBLING_TLO1.png)");
    selected.css("background-size", "cover");
    selected.css("background-repeat", "no-repeat");        
    }, function(){
    var selected = $(this).closest(".row-change-background").find(".obszar-change-background");
    selected.css("background-color", "#c6e4cc");
    selected.css("background-image", "none");  
  });
Sharon Choong
  • 566
  • 2
  • 8
  • Thank you! It is working perfectly. Do you happen to know, why in Firefox one have to wait longer for the background change to show on hover, when in Chrome it works right after the page opens? – KasiaW Feb 22 '21 at 07:52
  • 1
    You're welcome. Hard to say as it could be a number of things in your code. If you search on stackoverflow, you'll see a lot of questions similar to yours, try them out. Here is one to start: https://stackoverflow.com/questions/5070477/jquery-firefox-having-slow-live-hover-speeds-chrome-ie-are-fast – Sharon Choong Feb 23 '21 at 12:55