将鼠标悬停在文本上，使用CSS在另一个分区（非子分区）中显示图像

我试着让你在文本上悬停的地方显示背景中的图像。 我在这里找到的东西都试过了，但都没用。我得到的最接近工作的东西是从这个，但图像将显示在一个小栏目内最小化文本所在的位置。如果纯CSS无法实现JS，我愿意实现JS。代码在下面，但这是我的。非常感谢您的帮助

HTML

---

我将创建文本悬停

{ 
    background-image: url("image url");
    background-repeat: no-repeat;
    background-position: your position;
}

我知道了。 对于任何感兴趣的人，我删除了针对divid的css和

visibility:hidden来自。预览并改为添加
显示：无；z指数：-1到。预览并使用此JS代码：

$(function(){
    $('#preview1').hover(function(){
        $('#preview1-show').show();
    },function(){
        $('#preview1-show').hide();
    });
    $('#preview2').hover(function(){
        $('#preview2-show').show();
    },function(){
        $('#preview2-show').hide();
    });
});

这不是一个完美的解决方案，因为我必须针对每个单独的链接（我有13个），但它的工作方式正是我想要的。
如果有人有更优雅的解决方案，请与我们分享。
我已经尝试过了，但我的问题是，该图像会显示在链接文本所在的div内，而不像我提供的示例中背景中显示的整个图像。@Dani您是否尝试过绝对定位：悬停？
{ 
    background-image: url("image url");
    background-repeat: no-repeat;
    background-position: your position;
}

$(function(){
    $('#preview1').hover(function(){
        $('#preview1-show').show();
    },function(){
        $('#preview1-show').hide();
    });
    $('#preview2').hover(function(){
        $('#preview2-show').show();
    },function(){
        $('#preview2-show').hide();
    });
});