Javascript 使鼠标位于文本上时显示图像

我试图在悬停文本时显示图像。图像不必代替文本出现，而是出现在另一个地方

想法如下：当我悬停“Google”一词时，Google徽标必须出现在红色框中；当我悬停“OneNote”一词时，OneNote徽标必须出现在红色框中。

我试着按照这个逻辑来做：

测试
函数setImg（）{
document.getElementById（“img1”）.src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU48ifXX9Kar3IFVrlfwx6UFLqaQno8rCebFvGtwk6yWky9_mz";
}
函数unSetImg（）{
document.getElementById（“img1”）.src=”https://i1.wp.com/www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google.gif?fit=1950%2C1200&quality=90&strip=all&ssl=1";
}

.hovercontainer{
宽度：500px；
保证金：0自动；
位置：相对位置；
高度：170px；
}
.悬停货柜{
位置：绝对位置；
最高：50%；
文本对齐：居中；
左：0；
右：0；
保证金：0自动；
z指数：10；
}
.img{
宽度：90%；
-webkit过渡：所有.3s易于输入输出；
-moz转换：所有.3轻松输入输出；
-ms转换：所有.3s易于输入输出；
-o型转换：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
不透明度：0；
位置：相对；}
.hover容器p:hover~img{
不透明度：1
}
.hover容器p:悬停{
不透明度：0；
}

正文

您可以将img src存储在将被悬停的元素的数据属性中。然后在悬停时，将img.src设置为悬停元素的

数据徽标

var elems=document.queryselectoral（“#thing li”）；
var logo=document.querySelector（“thing.logo”）；
要素forEach（功能（要素）{
元素addEventListener（“鼠标悬停”，函数（）{
logo.src=elem.getAttribute（“数据徽标”）；
});
元素addEventListener（“mouseout”，函数（）{
logo.src=“”；
});
});
img.logo{
边框：2个点红色；
高度：50px；
最小高度：50px；
最小宽度：50px；
}


谷歌
OneNote

是否可以选择使用CSS？你应该可以不用JS，这取决于结构和目标。“但是如果我用文本替换img，它就不起作用了”-->这是什么意思？用文本替换哪个图像？@KrishnaPrashatt问得好。你的HTML无效。先修好。是的，对不起，我修改了这个句子。我的意思是，我试图用文本替换google的徽标，但这不起作用，文本不会更改为onenote的徽标！太好了，太好了！这并不是我所期望的，但对你的时间来说很有意义！