Вернуться к основному изображению

Question

Итак, у меня есть небольшой код javascript, который меняет мое основное изображение при наведении на пиктограмму, который отлично работает! это их способ вернуться к главному при наведении курсора. Я уверен, что есть небольшое утверждение, но я не могу понять это!

<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div> 
<div class="products"> 
<img src="img.jpg" width="200"/> 
<img src="img1.jpg" width="200"/> 
<img src="img2.jpg" width="200"/> 
</div> 

и браузер

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.products img').mouseover(function() { 
    var url = $(this).attr('src'); 
    $('#main').attr('src', url); 
}); 
}); 
</script> 

Answer 1

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var def_url = $('#main').attr('src'); 
    $('.products img').hover(function() { 
     var url = $(this).attr('src'); 
     $('#main').attr('src', url); 
    }, function() { 
     $('#main').attr('src', def_url); 
    }); 
}); 
</script> 

Answer 2

Попробуйте это ...

$('.products img').mouseover(function() { 
//do some action... 
},function(){ 
//undo the action.. 
}); 

Answer 3

Вы можете добиться этого с помощью hover(). при перемещении мыши из нее, он восстанавливает оригинальное состояние и зависание дает вам необходимую функциональность.

Таким образом, это сочетание двух функций mouserover() и отведении указателя мыши()

надеюсь, что это помогает ..

Answer 4

Вы можете сделать это двумя способами:

1) использовать JQuery hoverhover documentation

$(selector).hover(
    function(){ alert("Hover in"); }, 
    function(){ alert("Hover out); } 
); 

2) использовать <div> с фоновым изображением и изменить его при наведении курсора мыши с помощью CSS

#selector{ 
    background: url('image1.png'); 
} 

#selector:hover{ 
    background: url('image2.png'); 
}