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';   
}

Answer 2

你想要这样的东西..点击链接

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