将鼠标悬停在某个孩子上时，动态更改父母的背景？

Question

我可能有一个愚蠢的问题，但我无法弄清楚：

我有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

到父母，但它没有做任何事情。还有其他办法可以解决这个问题吗？