如何在鼠標懸停在循環期間更改圖像大小？

當我在下面的代碼中應用的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

如何在鼠標懸停在循環期間更改圖像大小？

回答

相關問題