悬停不适用于图片库

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.

悬停不适用于图片库

Hover not working for the image gallery

html

javascript

css

hover