jquery - 使用 jQuery 更改多个背景图像

Question

在我的CSS页面中，我有这样的代码:

header {
    background:url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg');
    background-position: 50% 33%, left top;
    background-repeat: no-repeat, no-repeat;
    background-size:26%,960px 130px;
    margin-left:auto;
    margin-right:auto;
}

现在在我的 html 页面中，我想在悬停导航栏时使用 JQuery 更改第一张图片。 你能帮帮我吗？

Answer 1

在你想做这项工作的任何地方使用类标题到你的导航按钮

.header {
    background:url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg');
    background-position: 50% 33%, left top;
    background-repeat: no-repeat, no-repeat;
    background-size:26%,960px 130px;
    margin-left:auto;
    margin-right:auto;
}


<script>
$(".header").hover(function(){
   $(this).css("background","url('Afbeeldingen/black.jpg'),url('Afbeeldingen/anotherhoverimage.jpg')"); 
});

$(".header").mouseout(function(){
   $(this).css("background","url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg')"); 
});
</script>