Javascript jQuery：当屏幕大小改变时，如何更改默认图像和悬停图像

我有一个外部CSS文件，用于页面上的响应元素：

@media only screen and (max-width:1089px){
   #shipping a{float:left;width:100%;margin-top:7px;padding:10px 0 10px 0;background:url("/images/shared/resp1.png") no-repeat;}
   #shipping a:hover{float:left;margin-top:7px;padding:10px 0 10px 0;background:url("/images/shared/h-resp1.png") no-repeat;}
}

@media only screen and (max-width:1011px){
   #shipping a{float:left;width:100%;margin-top:7px;padding:10px 0 10px 0;background:url("/images/shared/resp2.png") no-repeat;}
   #shipping a:hover{float:left;margin-top:7px;padding:10px 0 10px 0;background:url("/images/shared/h-resp2.png") no-repeat;}
}

我需要删除外部CSS文件并使用jQuery替换图像

我找到了使用其他用户发布的jQuery替换图像的解决方案，如：

但我不确定在这个例子之后，悬停图像如何也可以包括在内，以及CSS文件中的其他属性，如浮动、宽度、边距

---

如何使用jQuery替换默认图像、悬停图像以及其他CSS属性？

通常的方法是：

使用

$（window）.resize（）的事件侦听器，然后可以使用
$（“#某个元素id”）.CSS（'property-name'，'value'）`和图像源（您说您已经知道如何根据以下行的条件调整CSS）：

if($(window).width() < x){
...

if（$（窗口）.width（）

关于悬停特性，如果你打算使用jQuery来做这件事，考虑使用一个变量来存储悬停图像的路径，它可以在你的<代码> ReSimule事件侦听器中被更新，然后使用与你改变I的主要源的相同类型的代码来创建图像上的悬停事件的事件侦听器。但只是指你创建的变量
好吗？
您可以使用jQuery更改CSS属性，但这需要更多的工作，特别是如果您是根据屏幕大小来更改CSS属性的话。为什么需要使用jQuery而不是CSS？任何像这样的问题“是否可以…X？”答案都是肯定或否定的。您应该问“我如何…X？”相反，对于APAD1，我使用了上面的CSS，但是响应元素/设计在IE<9上不起作用。