使用 jQuery 更改多个背景图像

Posted 2023-03-06

【中文标题】使用 jQuery 更改多个背景图像

【英文标题】：Change multiple background-images with jQuery

【发布时间】：2013-05-13 12:23:43

【问题描述】：

在我的 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 来更改第一张图片。 你能帮帮我吗？

【问题讨论】：

您不需要为此使用 js/jquery，css 伪类 :hover 应该是更好的选择，请参阅 Manish Jangir 的回答

【参考方案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>

【讨论】：

我想你误会了。 black.jpg 必须保留。当我悬停在我的 html 页面中编写的导航菜单时，r.png 图像应该更改为另一个图像

它会改变整个 2 个图像，不是吗？我想一定是这样的：background:url('ANOTHERIMAGE'),url('Afbeeldingen/black.jpg');

我们必须用 JQuery 来做，这是学校作业

当我使用此代码时，我的总背景变为 black.jpg 和 r.png 组合。我只想更改 r.png 图像；

可以从 .hover 函数中删除 url('Afbeeldingen/black.jpg')

【参考方案2】：

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

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