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>

Answer 2

jQuery 中没有当前的本地方法来切换背景图像的顺序（以及因此显示的图像）。这是通过解析链接并交换它们来交换具有两个背景图像的元素的背景图像顺序的代码：

var bg=$(this).css('background-image').split('),url(');
if(bg.length==2) $(this).css('background-image','url('+bg[1]+','+bg[0]+')');