js怎么实现鼠标移动到文字切换成图片

怎么用onmouseover事件将文字切换为图片

css就能实现，用:hover伪类，示例如下，帮助到你能点个采纳吗，谢谢？

<style>
    .test .word{display:block}
    .test .img{display:none}
    .test:hover .word{display:none}
    .test:hover .img{display:block}
</style>
<div class="test">
    <div class="word">移动到这里显示图片</div>
    <div class="img"><img src="https://avatar.csdnimg.cn/F/7/5/4_weixin_52276124_1604621695.jpg" /></div>
</div>
<br /><br />
<div class="test">
    <div class="word">移动到这里显示图片</div>
    <div class="img"><img src="https://avatar.csdnimg.cn/F/7/5/4_weixin_52276124_1604621695.jpg" /></div>
</div>

如果是为了研究js，可以用下面的

<div>
    <div>移动到这里显示图片</div>
    <div style="display:none"><img src="https://avatar.csdnimg.cn/F/7/5/4_weixin_52276124_1604621695.jpg" /></div>
</div>
<br /><br />
<div>
    <div>移动到这里显示图片</div>
    <div style="display:none"><img src="https://avatar.csdnimg.cn/F/7/5/4_weixin_52276124_1604621695.jpg" /></div>
</div>
<script>
    var test = document.querySelectorAll('.test');
    for (var el of test) {
        el.onmouseenter = el.onmouseleave = function (e) {
            var enter = e.type == 'mouseenter';
            var div = this.querySelectorAll('div');
            div[0].style.display = enter ? 'none' : 'block'
            div[1].style.display = enter ? 'block' : 'none'
        }
    }
</script>