Изменить изображение в «слайдере» на hover li

Question

Я пытаюсь создать «слайдер», который меняет изображение при наведении на элемент li. Если вы нажмете на ссылку внизу, вы увидите, что я имею в виду.

http://www.ing.nl/particulier/

<div id="infobyimage"> 
<div class="nav-blocks"> 
    <ul class="nav"> 
     <li> Geschilderd huis</li> 
     <li> Steiger</li> 
     <li> Houtrot pillen</li> 

    </ul> 
</div> 
<div class="slider"> 
<ul> 
    <li><img src="images/DSC00742-slide.png" alt="Geschilderd huis"/></li> 
    <li><img src="images/DSC00752-slide.png" alt="Geschilderd huis"/></li> 
</ul> 

В HTML выше вы можете увидеть, что я пытаюсь достичь такой же, как по ссылке. Может ли кто-нибудь объяснить, как это сделать с помощью jquery или просто CSS?

Спасибо.

Answer 1

Вы должны сделать .hover(function(){//content}); на элемент, который вы хотите изменить, например, если вы хотите функцию для зависший над одним элементом вы могли бы сделать:

$('.element').hover(function(){ 
$('.another_element').fadeOut(100); 
}); 

Эта функция говорит, что при наведении курсора мыши на div, который имеет класс элемента, он делает другой div, который имеет класс другого элемента .fadeOut() в 100 миллисекунд и делает непрозрачность другого элемента 0. Для этого фрагмента JQuery работать, хотя вам нужно добавить файл ajax

Answer 2

Возможно, это поможет вам Demo

я изменить img attribute, когда я зависать частности li т.е.

$("ul li:nth-child(1)").hover(
function() {  
    $('#changeImage').attr('src','source'); 
});