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。

悬停不适用于图库

1 个答案: