Javascript 当您将鼠标悬停在选项卡上时，图像会发生变化

我有一个标签，里面有一个图像，我希望这样，当你悬停/选择该标签时，图像会变为另一个图像，然后当你取消选择/取消悬停时，图像会变回原始图像。 当您在选项卡上悬停/选择时，我希望获得从Icon20.png到Icon10.png的图像更改 这是选项卡的代码

$'one'。悬停函数{ $'two'.css{'content'：'urlhttps://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png'}}, 作用{ $'two'.css{'content'：'urlhttps://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png'} }; $'one'。单击函数{ $'two'.css{'content'：'urlhttps://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png'}}, 作用{ $'two'.css{'content'：'urlhttps://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png'} }; 分区选项卡{ 溢出：隐藏； 边框：1px实心336699； 背景色：336699； 字体系列：拉托，无衬线； } div.tab按钮{ 背景色：336699； 浮动：左； 边界：FFF； 大纲：无； 光标：指针； 填充：14px 16px； 过渡：0.3s； 颜色：fff； 字体系列：拉托，无衬线； 字体大小：20px； 字体风格：普通； 字体大小：400； 线高：22px； } div.tab按钮：悬停{ 背景色：FFFFFF； 颜色：336699； } div.tab按钮.active{ 背景色：fff； 颜色：336699； } 真空购物者

---

在四处搜索之后，我发现了这些JSFIDLE：和 我将它们中的元素组合在一起，在代码段中生成JQuery

$('#one').hover(function(){
        $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
        $('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});

---

因此，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的东西，清楚地解释什么不起作用，并提供一个答案。这是一个古老的问题，已经被回答了很多次。你需要使用：悬停和一个精灵图像。可能的副本你应该为你的问题创建一个答案，并将其发布在下面的答案部分。FWIW，这是一个复杂的图像翻转解决方案。使用CSS和图像精灵。如果你要走这条路线，你还应该包括这个JS应用到的标记，这样将来的用户可以参考一个更实用的例子。