我正在尝试使用jquery
为我的一个html元素设置背景图像<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;");
});
但这永远不会奏效。只关注改变就是将一个样式属性添加到HTML中,就像这样
<div class="rmz-srchbg" style="">
</div>
CSS没有变化。
答案 0 :(得分:22)
试试这个:
<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>
<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=" " id="srchbtn" class="rmz-srchico">
<br style="clear:both;">
</div>
$(document).ready(function() {
$('#globalsearchstr').bind('mouseenter', function() {
$(this).parent().css("background", "black");
});
});