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

时间:2013-12-03 11:43:15

标签: javascript jquery html css

我正在尝试使用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没有变化。

7 个答案:

答案 0 :(得分:22)

试试这个:

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

答案 1 :(得分:10)

使用:

 $(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;");

您可以看到更多示例here

答案 2 :(得分:4)

试试这个

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

答案 3 :(得分:2)

试试这个

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

答案 4 :(得分:1)

删除网址中no-repeat之后的分号并尝试。

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

答案 5 :(得分:1)

您必须删除css规则字符串中的分号:

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

答案 6 :(得分: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>
$(document).ready(function() {
  $('#globalsearchstr').bind('mouseenter', function() {
    $(this).parent().css("background", "black");
  });
});