悬停不适用于图片库

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)"

此处演示

先前代码的问题是，有2个具有相同名称的elements preview并且当您说preview.src它获取了elements列表，但无法将其分配给适当的preview - element 。