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/

Answer 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>