Changing CSS background dynamically with jQuery

Question

I want to change the background image of a fixed div when you hover over another div. I can change other properties but it won't let me override the image URL once set.

I want the product-preview's background-image to change dynamically when hovered over another div.

I tried combining multiple methods like hover, mouseenter+mouseleave and I also tried different css properties like background and background-image

Javascript

jQuery( document ).ready( function() {

    //check for init
    window.alert("jQuery succesful");


    //basic

    //Poke Rice
    $("label.form-check-label[for=poke_rijst]").hover(function() {
        jQuery( ".product-preview" ).show();
        //afbeeldings URL
        var url = "http://i64.tinypic.com/ie12f9.jpg";
        jQuery(".product-preview").css("background-image",url);
    });

    //Poke Salad
    $("label.form-check-label[for=poke_salad]").hover(function() {
        jQuery( ".product-preview" ).show();
        //afbeeldings URL
        var url2 = "http://i65.tinypic.com/2zyv7dc.jpg";
        jQuery(".product-preview").css("background-image", url2);
    });

});

.product-preview {
  display: none;
  color: white;
  position: fixed;
  width: 120px;
  height: 120px;
  top: 230px;
  padding: 10px;
  right: 0;
background-image: url("http://i64.tinypic.com/ie12f9.jpg");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-preview"></div>
<label class="form-check-label" for="poke_rijst"><input type="radio" id="poke_rijst" name="ppom[fields][basis]" class="ppom-check-input" value="Poke Rijst" data-price="" data-optionid="poke_rijst" data-label="Poke Rijst" data-title="BASIS" data-onetime="" data-taxable="" data-without_tax="" data-data_name="basis"> <span class="ppom-label-radio">Poke Rijst</span></label>

<label class="form-check-label" for="poke_salad"><input type="radio" id="poke_salad" name="ppom[fields][basis]" class="ppom-check-input" value="Poke Salad" data-price="" data-optionid="poke_salad" data-label="Poke Salad" data-title="BASIS" data-onetime="" data-taxable="" data-without_tax="" data-data_name="basis"> <span class="ppom-label-radio">Poke Salad</span></label>

It works whenever no background-image is set yet. As soon as one of the functions placed a background-image, the other function will not override it. It does work when I set background-image, "none" on the second function.

Thanks in advance, I'm stil learning jQuery.

Here is a JDFiddle:

https://jsfiddle.net/buyfcr6q/

jsfiddle.net/buyfcr6q

Jasper Janssen
– Jasper Janssen

2019-02-08 15:26:29 +00:00
Commented Feb 8, 2019 at 15:26 — Jasper Janssen
– Jasper Janssen, Commented Feb 8, 2019 at 15:26

oligofren · Accepted Answer · 2019-02-08 15:36:35Z

1

The html was missing the elements you referenced (the labels) and the CSS background property was missing the "url( )" bit. Also, the original html markup was invalid, as the string for the product-preview did not end with a quote, which made the javascript no longer work.

jQuery( document ).ready( function() {

    //basic

    //Poke Rice
    $(".form-check-label[for=poke_rijst]").hover(function() {
        jQuery( ".product-preview" ).show();
        //afbeeldings URL
        var url = "url(http://placekitten.com/g/200/300)";
        jQuery(".product-preview").css("background-image",url);
    });

    //Poke Salad
    $(".form-check-label[for=poke_salad]").hover(function() {
        jQuery( ".product-preview" ).show();
        //afbeeldings URL
        var url2 = "url(http://placekitten.com/g/200/200)";
        jQuery(".product-preview").css("background-image", url2);
    });

});

.product-preview {
  display: none;
  background: yellow;
  width: 200px;
  height: 300px;
}

.form-check-label {
  height: 100px;
  width: 100px;
}

.one {
  background: green;
}

.two {
  background: red;
}

div,label {
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label class="form-check-label one" for="poke_rijst"></label>
<label class="form-check-label two" for="poke_salad"></label>

<div class="product-preview"></div>

edited Feb 8, 2019 at 15:36

answered Feb 8, 2019 at 15:31

oligofren

23.4k18 gold badges116 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jasper Janssen Over a year ago

Thank you so much. By just adding the url() around the image link, it already worked. Have a nice day! :)

oligofren Over a year ago

Great, and if it helped you it would be nice if you accepted it as the answer. Great day to you too.

Collectives™ on Stack Overflow

Changing CSS background dynamically with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related