html - 如何让一个图像出现在另一个图像的悬停上？

Question

我们被指派为一个学校元素制作一个网站展示我们最近制作的定格动画。我相处得很好，但是我遇到了一个问题。我想知道如何使一个图像出现在另一个图像的悬停上。我已经将两个选定的图像都放入其中，当悬停在 webkit 过渡中时，其中一个变成了颜色，并且与另一个进行了淡入。但是，我希望淡入的图像与另一个图像链接在一起，这样当将鼠标悬停在从灰度变为彩色的图像上时，另一个图像会随之淡入。尽快需要答案。干杯。

Answer 1

如果你只是想隐藏，这里是没有 jQuery 的解决方案，你可以在这里查看:http://jsfiddle.net/wDVUd/

HTML:

<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"/>

CSS:

#imageToShow
{
    display: none;
}

JS:

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

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