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]+')');

使用jQuery更改多个背景图像

2 个答案: