jquery背景图像css

jquery background image css

本文关键字：css 图像 背景 jquery      更新时间：2023-09-26

我一直在尝试这项工作，但我无法得到我放入的代码：

案例1代码无效

onmouseover="jQuery(this).css({background-image:url('<?php echo $ur;?>')});"

我认为代码是可以的，但没有得到工作，网址是可以的。只有使用这个才能工作：

案例2代码工作正常

onmouseover="jQuery(this).css('background-image','url('<?php echo $ur;?>')');"

但在第一种情况下不起作用，我需要使用第一种情况，因为我需要添加更多的css 代码

我不明白发生了什么没有工作

感谢您的帮助，关于

您可以通过多次调用函数来获得多行css：

<script>
function myMouseOver() {
  jQuery(this).css('background-image','url('<?php echo $ur;?>')');
  jQuery(this).css('margin','1337');
  jQuery(this).css('padding','1337');
  // etc
}
</script>

然后无论你在哪里使用鼠标，

onmouseover="myMouseOver()"

不要在html中绑定。尽可能地将标记与逻辑分离。

<tag class="something" data-background="<?php echo $ur;?>"></tag>

脚本：

$('.something').on('mouseover', function(){
    var $this = $(this);
    $this.css('backgroundImage', "url('"+ $this.data('background') +"')");
}).on('mouseout', function(){
    $(this).css('backgroundImage', '');
});
使用jQuery更改背景图像CSS有两种不同的方法。 
jQuery(this).css('background-image','url('<?php echo $ur;?>')');
jQuery(this).css({'background-image':'url('<?php echo $ur;?>')'});

通常包括连字符的CSS属性需要在JavaScript
例如，CSS属性font-size表示为当在JavaScript中用作属性名称时，作为CCD_ 2。

然而，将CSS属性的名称传递给.css()方法作为字符串–在这种情况下或者连字符形式也可以。

https://learn.jquery.com/using-jquery-core/css-styling-dimensions/

当CSS用作对象属性时，始终使用camelCase

onmouseover="jQuery(this).css({backgroundImage:url('<?php echo $ur;?>')});"

而且您使用的是jQuery，所以为什么不使用合适的事件处理程序以及呢

$('.element').on('mouseeover', function() {
    $(this).css({
        backgroundImage : 'url(' + $(this).data('bg') + ')'
    });
});

然后

<div class="element" data-bg="<?php echo $ur;?>"></div>

您可以使用.attr函数更改样式属性：

onmouseover="jQuery(this).attr('style', 'background-image:url(<?php echo "'"+$ur+"'";?>)');"
相关文章：