我有以下代码，当将鼠标悬停在某些文本上时，它会加载背景图像，但是当离开文本时，背景图像会保留，而不是恢复为背景颜色。我看不出这不触发的任何原因。
jQuery('#rollover1').on('mouseenter', function(){
jQuery('#container').css('background-image', 'url(IMAGE URL)');
});
jQuery('#rollover1').on('mouseleave', function(){
jQuery('#container').css('background-color', '#222222');
});
你可以这样做....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css({
"background-image":"url('https://cdn.pixabay.com/photo/2017/05/24/09/28/great-2339957_1280.jpg')",
"background-size":"cover",
"background-position":"center"
});
},
mouseleave: function(){
$(this).css({
"background-image": "",
"background-color": "red"
});
}
});
});
</script>
</head>
<body>
<p style="height:300px;width:300px;background-color:red;">this is my code.</p>
</body>
</html>你必须指定background-image值来覆盖它，background-color是一个完全不同的CSS属性，下面是一个工作片段：
jQuery('#rollover1').on('mouseenter', function(){
jQuery('#container').css('background-image', 'url(https://via.placeholder.com/450?text=Visit+Blogging.com+Non)');
});
jQuery('#rollover1').on('mouseleave', function(){
jQuery('#container').css({backgroundColor:'red', backgroundImage:'none'});
});#rollover1 {
width: 100vw;
height: 100vh;
}
#container {
background-color: red;
padding: 10px;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="rollover1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>正如评论所建议的那样，在鼠标离开时，通过将图像设置为无并设置背景颜色来删除图像。
您可以尝试下面的代码段。
$('#rollover1').on('mouseenter', function(){
$('#container').css('background-image', 'url(https://picsum.photos/200/300)');
});
$('#rollover1').on('mouseleave', function(){
$('#container').css('background-image', 'none');
$('#container').css('background-color', '#222222');
});#container {
height: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rollover1">
<div id="container">Test</div>
</div>您尚未在任何地方声明要删除图像。因此，如果要删除图像，则需要明确说明。
jQuery('#rollover1').on('mouseenter', () => {
jQuery('#container').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/157px-Google_%22G%22_Logo.svg.png")');
}).on('mouseleave', () => {
jQuery('#container').css('background-image','none').css('background-color', '#222222');
});