jQuery为悬停功能选择子项时没有标记

Question

我有一个关于如何为自定义返回顶部按钮设置悬停功能的问题。我正在使用translate.js翻译我的网站，这意味着我经常需要对DOM进行实时操作，而这种问题就是这种情况。 我可以使用CSS做到这一点，但由于我会进一步扩展功能和动画，因此对jQuery感兴趣。我有一个像这样的返回页首按钮：

<a id='backtotop-button' href='#top' class='hvr-grow-rotate footerLink trn'>
</a>

然后我有了一个功能，该功能可以根据语言设置正确的文本，并在后面附加一个小箭头。

$('#backtotop-button').empty();
$('#backtotop-button').append(
    `${translator.get('Back to Top ')} <i id='footerLinks6' class='fa fa-arrow-up'></i>`
);

选择没有标签的文本以及箭头时出现我的问题。

我的悬停功能：

$('#backtotop-button').children().hover(function() {
        $(this).css('background-color', '#33A2FB');
}, function() {
        $(this).css('background-color', '#FFF');
});

我想使文本和箭头基本上在悬停时变为蓝色，但是我得到的整个链接区域（正方形）为蓝色，