Как сделать изображение появляющимся при наведении на другое изображение?

Question

Для школьного проекта нам было назначено сделать сайт витрине недавнего движения остановки, которое мы сделали. Я хорошо лажу, но я столкнулся с проблемой. Я хотел бы знать, как заставить изображение появляться при наведении другого изображения. Я поместил оба выделенных изображения, и один из них превратился в цвет при наведении с помощью перехода webkit и сделал затухание с другим. Однако я хотел бы, чтобы изображение, которое завязывается, чтобы быть связанным с другим, так что, когда он зависает над изображением, которое превращается из оттенков серого в цвет, другое изображение исчезает вместе с ним. Нужны ответы как можно скорее. Приветствия.

Answer 1

вы хотите что-то вроде этого .. follow link

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

Answer 2

Если вы просто хотите, чтобы скрыть, вот решение без 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'; 
}