使用 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>