使用jquery在CSS中设置背景图片

Question

我正在尝试使用jQuery为我的某个HTML元素设置背景图像

<div class="rmz-srchbg">
    <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
    <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
    <br style="clear:both;">
</div>

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");
});

但这从来没有起作用。只有在焦点上，才会向HTML添加样式属性，就像这样：

<div class="rmz-srchbg" style="">

</div>

CSS没有发生任何改变。

- None

---

使用绝对路径怎么样？在控制台中检查您的相对路径是否准确。 - A. Wolff

CSS $(this).css('background-image', 'url(' + imageUrl + ') no-repeat'); - Prateek

这行代码有问题，background-image应该是backgroundImage。 - Aditya Ponkshe

Answer 1

试一下这个：

<div class="rmz-srchbg">
    <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
    <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
    <br style="clear:both;">
</div>
<script>
$(function(){
   $('#globalsearchstr').on('focus mouseenter', function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
   });
});
</script>

- Ringo

Answer 2

使用：

 $(this).parent().css("background-image", "url(/images/r-srchbg_white.png) no-repeat;");

取代

 $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");

你可以在这里看到更多的示例。

- Aditzu

---

在 jQuery 中使用 background-image，应该使用 backgroundImage！ - Payam Shakibafar

两种方法都可以接受。 - Aditzu

当然可以。http://www.w3schools.com/css/css_background.asp - Aditzu

Answer 3

试试这个

 $(this).parent().css("backgroundImage", "url('../images/r-srchbg_white.png') no-repeat");

- Aditya Ponkshe

---

感谢分享。在 url() 中使用 ''，加上一个赞。这个方法非常有效。 - OO7

Answer 4

试试这个

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");
});

- Amit

---

无效。问题仍然存在（在问题中已经解释）。 - None

@Athul，请现在尝试，有什么错误？ - Amit

Answer 5

在url中no-repeat后面移除分号并尝试。

$("#globalsearchstr").focus(function(){
    $(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
});

- Pbk1303

---

"background" 属性不正确。你想说的是 "background-image"。 - Aditzu

Answer 6

你需要在CSS规则中删除分号：

$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");

- Massimo Guidi

Answer 7

<div class="rmz-srchbg">
  <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
  <input type="submit" value="&nbsp;" id="srchbtn" class="rmz-srchico">
  <br style="clear:both;">
</div>

$(document).ready(function() {
  $('#globalsearchstr').bind('mouseenter', function() {
    $(this).parent().css("background", "black");
  });
});

- sumit