I am trying to set the background image for one of my html element using jquery
<div class="rmz-srchbg">
<input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
<input type="submit" value=" " 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;");
});
but this never works.On focus only change happens is that a style attribute is added to HTML, like this
<div class="rmz-srchbg" style="">
</div>
No change in CSS happens.
This question is related to
javascript
jquery
html
css
try this
$(this).parent().css("backgroundImage", "url('../images/r-srchbg_white.png') no-repeat");
Use :
$(this).parent().css("background-image", "url(/images/r-srchbg_white.png) no-repeat;");
instead of
$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat;");
More examples you cand see here
You have to remove the semicolon in the css rule string:
$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
Try this
$("#globalsearchstr").focus(function(){
$(this).parent().css("background", "url('../images/r-srchbg_white.png') no-repeat");
});
Remove the semi-colon after no-repeat
, in the url and try it .
$("#globalsearchstr").focus(function(){
$(this).parent().css("background", "url(/images/r-srchbg_white.png) no-repeat");
});
<div class="rmz-srchbg">
<input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox">
<input type="submit" value=" " id="srchbtn" class="rmz-srchico">
<br style="clear:both;">
</div>
$(document).ready(function() {
$('#globalsearchstr').bind('mouseenter', function() {
$(this).parent().css("background", "black");
});
});
Source: Stackoverflow.com