如何在鼠标悬停在循环期间更改图像大小？

当我在下面的代码中应用的Javascript它只第一图像产生的效果只有第一个图像尺寸改变，甚至我的鼠标悬停在任何图像如何在鼠标悬停在循环期间更改图像大小？

<div class="container"> 
    <div class="row"> 
     @foreach($gigs as $gig) 
     <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12 gigbox"> 
      <div class="panel panel-default" style="height: 285px"> 
       <img src="{{URL::asset($gig->image)}}" id="img" width="100%" onmouseover="changesize()" height="160" alt=""> 
       <ul class="skillUl"> 
        <li class="gigtitle" style="list-style: none"><a href="{{route('gig',['gig_id'=>$gig->id, 'gig_title'=>$gig->gigtitle])}}"> I will {{$gig->gigtitle}}</a></li> 
        <a class="startingFrom" href="{{route('gig',['gig_id'=>$gig->id, 'gig_title'=>$gig->gigtitle])}}">Starting From <Span class="price"> Rs {{$gig->price}}</Span></a> 
       </ul> 
      </div> 
     </div> 
     @endforeach 
    </div> 
</div>

JavaScript代码是在这里

<script> 
    function changesize() { 
     document.getElementById("img").style.width = "130px"; 
    } 
</script>

来源

2017-05-28 Muhammed Umar

一个ID必须是唯一的... 使用类或使用CSS设置img：hover ...变换比例尺 –

你能为我写代码吗？我在网上新 –

把css样本放在你的CSS结尾... –

CSS样本

img { transition: all .2s ease-in-out; } 
img:hover { transform: scale(1.1); }

来源

2017-05-28 11:34:02

基本上，我想通过javascript改变大小为小，并显示一些额外的信息悬停，就像Fiverr.com，当我们将鼠标悬停在任何演出上时，它的改变图片尺寸并显示其他信息，如上方图片上的用户名称和评级信息 –

将尺寸更改为small ='transform：scale（0.5）' 您有没有要求显示悬停的附加信息... 请建立一个小提琴的所有信息... –

您正在使用一个循环来创建id="img"多个元素。在任何给定页面上，id都应该是唯一的。您应该改用class="img"并使用getElementsByClassName()方法：

document.getElementsByClassName("img").style.width = "130px";

你也应该考虑弗兰克的Wisniewski的建议，使用CSS。您可能可以实现大部分或全部你没有使用JavaScript描述的内容。

来源

2017-05-28 22:05:14 Henry

如何在鼠标悬停在循环期间更改图像大小？

回答

相关问题