使用 jQuery 动态更改 CSS 背景

Question

当您将鼠标悬停在另一个 div 上时，我想更改固定 div 的背景图像。我可以更改其他属性，但它不会让我在设置后覆盖图像 URL。

我希望产品预览的背景图像在悬停在另一个 div 上时动态变化。

我尝试结合多种方法，例如 hover、mouseenter+mouseleave，还尝试了不同的 css 属性，例如 background 和 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>

只要还没有设置背景图像，它就可以工作。只要其中一个函数放置了背景图像，另一个函数就不会覆盖它。当我在第二个函数上设置 background-image, "none" 时，它确实有效。

先谢谢了，我还在学习 jQuery。

这是一个 JDFiddle：

https://jsfiddle.net/buyfcr6q/

Answer 1

html 缺少您引用的元素（labels）并且 CSS 背景属性缺少“url( )”位。此外，原始 html 标记无效，因为 product-preview 的字符串没有以引号结尾，这使得 javascript 不再工作。

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>