Javascript 如何制作文本以更改其他图像，然后将用户鼠标移到文本上

所以我想让某人将鼠标移到文本上，将图像（第一个图像）更改为其他图像（第二个），但随后鼠标不再停留在文本上，图像将更改回第一个图像（第一个）

我发现了一些相似的东西，但那就是你用鼠标在图像上移动。 HTML

<a href="URL ADDRESS">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" />
</a>

<a href="URL ADDRESS">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" />
</a>

---

您需要使用JavaScript或JavaScript框架来实现这一点

如果您正在寻找类似的产品： 签出此jQuery插件：

以下是其他一些： 最好（也是最快）的方法是使用CSS（假设您的html结构可以支持这种解决方案）

例如：

html

<img class="class-show-hide" src="img1.jpg" />
<img class="class-hide-show" src="img2.jpg" />

奖金

img.class-show-hide
{
   display: inline-block;
}
img.class-hide-show
{
   display: none;
}
img.class-show-hide:hover
{
   display: none;
}
img.class-show-hide:hover + img.class-hide-show
{
   display: inline-block;
}

a.hover-link
{
    position: relative;
    display: inline-block;
    min-width: 200px;
    min-height: 200px;
}
a.hover-link .class-show-hide
{
   position: absolute;
   display: block;
   visibility: visible;
   z-index: 2;
}
a.hover-link .class-hide-show
{
   position: absolute;
   display: block;
   visibility: hidden;
   z-index: 1;
}
a.hover-link:hover .class-show-hide
{
    visibility: hidden;
    z-index: 0;
}
a.hover-link:hover .class-hide-show
{
    visibility: visible;
    z-index: 2;
}

您甚至可以添加css转换/动画以产生更为奇特的效果，这将使纯js解决方案变得缓慢，甚至是不可能的

更新

对于给定的html示例，此解决方案可以应用为：

<a href="a.url.here" class="hover-link">
<img class="class-show-hide" src="img1.jpg" />
<img class="class-hide-show" src="img2.jpg" />
</a>

注意：为了使用文本而不是第二个图像，只需使用

<span class="class-hide-show">text here</span>

这里的文本

元素而不是第二个图像，并相应地调整css

---

兄弟，这可能会吸引很多反对票，这是你的第一个问题吗？？？对不起，我忘了写代码，你必须展示你尝试过的东西，以及你被卡住的地方。你不能期望一个现成的解决方案这里是最简单的实现我没有尝试过我是html新手：（但我搜索代码真的很辛苦。是的，这是我的first@seepo，只需使用带有文本的

，而不是第二个图像Noo…我想在特定位置更改特定图像。但是如何使用此css使文本工作？class=class show hide？或者如何不获取它：（好的：（由于某些原因，图像甚至不存在appear@seepo，好的，让我准备一个jsfiddleM，它在文本旁边显示一个图片。我想要的是将已经存在的图片更改为另一个图片（我有两张图片都是相同的，只是颜色不同）。如果我想要的太多，很抱歉。