使用 jQuery 动态更改 CSS 背景

Question

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

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

我尝试结合多种方法，如悬停、鼠标输入+鼠标离开，我还尝试了不同的 css 属性，如背景和背景图像

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