Html 如何使一个图像出现在另一个图像的悬停上？

对于一个学校项目，我们被指派制作一个网站

---

展示我们最近制作的停止动作。我相处得很好，但是我遇到了一个问题。我想知道如何使一个图像出现在另一个图像的悬停。我已将两个选定的图像放置在中，其中一个在使用webkit过渡悬停时变为彩色，并与另一个进行了淡入。但是，我希望淡入的图像与其他图像链接，以便在将鼠标悬停在从灰度变为彩色的图像上时，其他图像也随之淡入。需要尽快答复。干杯。

你想要这样的东西

---

如果您只是想隐藏，这里有一个不带jQuery的解决方案，您可以在这里实时查看：

HTML:

JS:

---

一些你需要的草图将有助于从这里开始，展示你目前所拥有的。请分享你的代码

$('.div1 li').hover(function(){
   var imgID = $(this).find('a').attr('href');
   $(imgID).fadeIn();
});

<img id="imageToHover" src = "http://farm4.static.flickr.com/3187/2663569943_42ec767f27_m.jpg" alt="hover me"/>

<img id="imageToShow" src = "http://farm4.static.flickr.com/3118/2918431127_ae33f59953_m.jpg" alt="image to show"/>

#imageToShow
{
    display: none;
}

document.getElementById('imageToHover').onmouseover = function() {
    document.getElementById('imageToShow').style.display = 'inline';   
}

document.getElementById('imageToHover').onmouseout = function() {
   document.getElementById('imageToShow').style.display = 'none';   
}