Question

当我在下面的代码上应用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>

Answer 1

css样本

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

Answer 2

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

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

你还应该考虑Frank Wisniewski建议使用CSS。你可以在没有javascript的情况下实现你所描述的大部分或全部内容。

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

2 个答案: