Question

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

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

我尝试结合使用多种方法（例如悬停，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>

只要未设置背景图像，它就起作用。一旦其中一个功能放置了背景图像，另一个功能将不会覆盖它。当我在第二个功能上将背景图像设置为“ none”时，它确实起作用。

谢谢，我在学习jQuery。

这是一个JDFiddle：

https://jsfiddle.net/buyfcr6q/

Answer 1

html缺少您引用的元素（label），而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>

使用jQuery动态更改CSS背景

1 个答案: