Javascript 将鼠标悬停在子对象上时动态更改父对象的背景？

我可能有个愚蠢的问题，但我就是想不出来：

我有3列，当我将鼠标悬停在每一列上时，我想改变它们的父列的背景

我正在使用以下代码：

$('#first-col').hover(function(){
   $(this).parent().parent().toggleClass('first-pic');
})

$('#second-col').hover(function(){
   $(this).parent().parent().toggleClass('second-pic');
})

$('#third-col').hover(function(){
   $(this).parent().parent().toggleClass('third-pic');
})

而且效果很好！现在问题的一部分是：有没有办法让它变得更流畅

我试着申请了

transition: background 0.5s linear

---

但它什么也没做。是否有其他方法可以解决此问题？

如果可以，请在我悬停的元素上应用@DrKey时检查它是否可能与@DrKey重复。但当我将其应用于父对象时，它是一个正在更改背景的对象…@vuchke无论如何都应该可以工作它可能有助于预加载背景图像并转换

backgound image

属性。您还可以尝试转换背景的透明度。另外，当您将鼠标悬停在一个新的子对象上时，是否应该删除其他类？