Javascript 如何在文本悬停时使图像响应

我正在我的网站上工作，在那里我对主页做了一些自定义更改。我希望仅当用户将鼠标悬停在文本上时才显示图像。 我完全不知道这个主题/一般的编码，所以我很高兴我能让它在桌面上工作，但我一直在思考如何使图像响应。如果有人能帮我解决这个问题，我将不胜感激，以下是我目前所能解决的问题：

函数ShowPicture（id，源）{
如果（来源=“1”）{
if（document.layers）document.layers[''+id+''）.visibility=“show”
else if（document.all）document.all[''+id+''）.style.visibility=“visible”
else if（document.getElementById）document.getElementById（“”+id+“”）。style.visibility=“可见”
}else if（源=“0”）{
if（document.layers）document.layers[''+id+''）.visibility=“hide”
else if（document.all）document.all[''+id+''）.style.visibility=“hidden”
else if（document.getElementById）document.getElementById（“”+id+“”）。style.visibility=“hidden”
}
}

#样式2{
位置：固定；
宽度：650px；
高度：440px；
顶部：110px；
右：55px；
可见性：隐藏；
}
h1{
边缘顶部：100px；
}

使用CSS：

#Style2 > img {
  width: 100%;
}

这将使图像始终适合容器。 例如：

函数ShowPicture（id，源代码）{
如果（来源=“1”）{
if（document.layers）document.layers[''+id+''）.visibility=“show”
else if（document.all）document.all[''+id+''）.style.visibility=“visible”
else if（document.getElementById）document.getElementById（“”+id+“”）。style.visibility=“可见”
}
其他的
如果（来源=“0”）{
if（document.layers）document.layers[''+id+''）.visibility=“hide”
else if（document.all）document.all[''+id+''）.style.visibility=“hidden”
else if（document.getElementById）document.getElementById（“”+id+“”）。style.visibility=“hidden”
}
}

#Style2{
位置：固定；
宽度：250px；
高度：440px；
顶部：110px；
右：55px；
可见性：隐藏；
}
h1{
边缘顶部：100px；
}
#Style2>img{
宽度：100%；
}

---

我真的不明白在这种情况下使用JS有什么意义。。。你可以用CSS做所有的事情（就我所理解的问题而言）

#img{
显示：无；
}
#链接：悬停+#img{
显示：块；
}
盘旋我

是的，这不是问题，您只需要了解媒体查询并根据屏幕大小更改宽度，例如，对于移动设备，您将添加到css:

@media（最大宽度：320px）{#Style2{宽度：160px；}}