如何将悬停效果仅应用于背景元素？

Question

我有两个元素，一个rect和一个文本，它们没有任何父子关系。文本在矩形上方。

我还有一个可以在rect上运行的功能。当我将鼠标悬停在仅矩形区域上时，该函数运行良好，但是当我将鼠标悬停在矩形上方的文本时，outFunction会触发。

当我将文本悬停时，我不需要运行outFunction（mouseOut function）。好像只有rect，但仍然在上面显示文字。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<svg xmlns="http://www.w3.org/2000/svg">
    <rect class='square large' x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>
<script>
    $('rect').hover(() => {
        console.log('hovering')
    }, () => {
        console.log('not hovering')
    })
</script>

如何使用jQuery或纯JS或通过调整一些CSS来做到这一点？