Hover не работает для галереи изображений

Question

Изображение наведения не работает в приведенном ниже коде. Всякий раз, когда я пытаюсь навести на конкретное изображение, что конкретное изображение не отображается. Но если я удалю вторую часть (в комментариях кода) из кода, тогда она работает отлично.

 <div class="container marginbot-50"> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s"> 
       <div class="section-heading text-center"> 
       <h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2> 
       <div class="divider-header"></div> 
       <p style="text-align:justify">It is a major construction firm.       
       </p> 
       </div> 
       </div> 
      </div> 
     </div> 


    <div class="gallery" align="center"><br> 
    <h4>Check details about project below</h4> 

    <div class="thumbnails"> 
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" /> 
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" /> 
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" /> 
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" /> 
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" /> 
</div> 

<div class="preview" align="center"> 
<img name="preview" src="img/works/1.jpg" alt=""/> 
</div> 

<!--*****************Second portion*******************--> 

<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s"> 
<div class="section-heading text-center"> 
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2> 
<div class="divider-header"></div> 
<p style="text-align:justify"> Construction is a major construction firm.       
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK. 
</p> 
</div> 
</div> 
</div> 
</div> 


    <div class="gallery" align="center"><br> 
    <h4>Check details about project below</h4> 

    <div class="thumbnails"> 
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" /> 
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" /> 
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" /> 
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" /> 
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" /> 
</div> 

<div class="preview" align="center"> 
    <img name="preview" src="img/works/1.jpg" alt=""/> 
</div> 
</body> 

Answer 1

Имейте это function, который принимает target и source и изменения в необходимых target's src

function changeSrc(control,target) 
{ 
    var targets=target.children[0]; //get its children 
    targets.setAttribute('src',control.getAttribute('src'));//change its src 
} 

Обновленное HTML

Вместо onmouseover="preview.src=img1.src" функция onmouseover вызова в onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"

DEMO HERE

Проблема с предыдущим кодом было, было 2 elements с таким же именем preview и когда вы сказали preview.src это неправдоподобным список elements и был не в состоянии назначить это соответствует preview - element.