javascriptの処理が一度に動いてしま

3カラムで画像を並べています。
マウスオーバーした時に「transform: scale()」の値を変えて
画像を拡大させる処理にしたいです。
現状、どの画像をマウスオーバーしても
全ての画像が一度に拡大してしまいます。
マウスオーバーした画像のみだけ拡大させるためには,
jqueryもしくはjavascriptで
どのよな処理を付け加えれば実現可能でしょうか。

HTML
1<div class="main_link">
2<div class="container clearfix">
3<a href="#">
4<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div>
5</a>
6<a href="#">
7<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div>
8</a>
9<a href="#">
10<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div>
11</a>
12</div>
13</div>

CSS
1.main_link {
2    width: 950px;
3    margin: 0 auto;
4}
5.main_link .container a {
6    display: inline-block;
7    float: left;
8}
9.main_link a .thumb {
10    overflow: hidden;
11}
12.clearfix:after { display: block; clear: both; content: ''; }

js
1$('.main_link a').hover(
2    function(){
3        $('.main_link a .thumb img').css({ 'transform': 'scale(1.2)'});
4    },function(){
5        $('.main_link a .thumb img').css({ 'transform': 'scale(1)'});
6    }
7);
8

行動規範の内容に同意します

回答2件

ベストアンサー

findメソッドを使います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .main_link {
8            width: 950px;
9            margin: 0 auto;
10        }
11
12        .main_link .container a {
13            display: inline-block;
14            float: left;
15        }
16
17        .main_link a .thumb {
18            overflow: hidden;
19        }
20
21        .clearfix:after {
22            display: block;
23            clear: both;
24            content: '';
25        }
26    </style>
27</head>
28<body>
29<div class="main_link">
30    <div class="container clearfix">
31        <a href="#">
32            <div class="thumb">
33                <img src="https://placehold.jp/ff4c4c/ffffff/150x150.png?text=image1" alt="" width="316" height="195">
34            </div>
35        </a>
36        <a href="#">
37            <div class="thumb">
38                <img src="https://placehold.jp/4cccff/ffffff/150x150.png?text=image2" alt="" width="316" height="195">
39            </div>
40        </a>
41        <a href="#">
42            <div class="thumb">
43                <img src="https://placehold.jp/dbff4c/ffffff/150x150.png?text=image3" alt="" width="316" height="195">
44            </div>
45        </a>
46    </div>
47</div>
48<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
49<script>
50    $('.main_link a').hover(
51        function () {
52            $(this).find('.thumb img').css({'transform': 'scale(1.2)'});
53        }, function () {
54            $(this).find('.thumb img').css({'transform': 'scale(1)'});
55        }
56    );
57</script>
58</body>
59</html>

投稿2017/02/14 05:05

s8_chu

総合スコア14731

dian_kat

2017/02/14 13:13 編集

ご回答ありがとうございます。望んでいた通りの動きになりました。ご丁寧に参考ページもありがとうございます。また、ご機会ございましたらよろしくお願いいたします。

行動規範の内容に同意します

ホバー時の挙動であれば、JSでなくともCSSで対応できます。
ふわっとした感じを出したければtransitionも設定しましょう。

本題からそれますが、セレクタを.main_link .container aのように繋げて使うのは、後々変更しづらくなるだけですので、なるべく避けた方が無難です。

css
1.main_link {
2    width: 950px;
3    margin: 0 auto;
4}
5.main_link .container a {
6    display: inline-block;
7    float: left;
8}
9.main_link a .thumb {
10    overflow: hidden;
11}
12.clearfix:after { display: block; clear: both; content: ''; }
13
14/* ふわっと拡大させたい場合 */
15.thumb img {
16  transition: transform 0.3s;
17}
18/* ここまで */
19
20.thumb img:hover {
21  transform: scale(1.2);
22}

投稿2017/02/14 08:02

yamato_hikawa

総合スコア2092

dian_kat

2017/02/14 13:12

ご回答ありがとうございます。最初cssでhoverを指定しておりましたが、「transform: scale」の動きが safari 10.0.3 IE 11 のブラウザで微妙にブレた動き（マウスオーバー時に画像が左に1~2pxずれる挙動）になってしまったので、 jsの方からアプローチすれば何かヒントがあるのではないかと思い、質問に至りました。メンテナンス性のご意見参考にさせていただきます。また機会がありましたらよろしくお願いいたします。