jQuery、mouseoverが反応しない原因について

jQuery javascriptについて質問です。

mouseover mouseoutを使用して画像の切り替えをしたいのですが何度試してみてもうまく行きません。

ちなみに画像サイズは全てバラバラなのでstyleで設定してます。

下の記述でプレビューするとmouseoutだけは当たっているのですが、mouseoverがうまく反応しません。

結果として、画像1枚が大きく表示されていて、その下に4枚の画像をぴったり整列させて、そこにマウスオバーアウトさせると大きく表示、切り替わりという風にしたいです。

クローム検証で確認してみてもエラーが起こらず、どうすればいいのか分かりません。

わかる方いましたら教えてもらえると非常に助かります。

よろしくお願いします。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<script src="../js2/jquery-3.1.1.min.js"></script>
<style>
html,body,ul,li{
	margin:0;
	padding:0;
	}
#pict{
	width:400px;
	height:200px;
	}
.img{
	width:100px;
	height:50px;
	float:left;
	}
#wrapper{
	overflow:hidden;
	}
ul{list-style:none;}
</style>
</head>

<body>
<img src="img/img1.jpg" id='pict'>

<ul id="wrapper">
 <li><img src='img/img1.jpg' class='img img1'></li>
 <li><img src='img/img2.jpg' class='img img2'></li>
 <li><img src='img/img3.jpg' class='img img3'></li>
 <li><img src='img/img4.jpg' class='img img4'></li>
</ul>

<script>
	$(function(){
	  $('.img1').on('mouseover',function(){
	 	$('#pict').attr('img','img/img1.jpg');
		})
			.on('mouseout',function(){
		$('#pict').attr('src','img/img1.jpg');
		});
	
	 $('.img2').on('mouseover',function(){
	 	$('#pict').attr('img','img/img2.jpg');
		})
			.on('mouseout',function(){
		$('#pict').attr('src','img/img1.jpg');
		});
		
	$('.img3').on('mouseover',function(){
		 $('#pict').attr('img','img/img3.jpg');
		 })
		 .on('mouseout',function(){
		$('#pict').attr('src','img/img3.jpg');
	});
		
		$('.img4').on('mouseover',function(){
		 $('#pict').attr('img','img/img4.jpg');
		 })
		 .on('mouseout',function(){
		$('#pict').attr('src','img/img1.jpg');
	});
	
	}); //function
	

</script>
</body>
</html>

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

回答2件

こういうことでしょうか？

JavaScript
1	$(function() {
2		$('.img').on('mouseover', function() {
3			var src = $(this).attr('src');
4			$('#pict').attr('src', src);
5		})
6		.on('mouseout', function() {
7			$('#pict').attr('src', 'img/img1.jpg');
8        });
9    }); //function

投稿2016/11/29 13:08

編集2016/11/29 13:29

naomi3

総合スコア1105

ベストアンサー

attr('img'

attr('src'
ですよね？

#sample

javascript
1$(function(){
2  $('.img1,.img2,.img3,.img4')
3    .on('mouseover',function(){
4      if(num=$(this).prop('class').match(/(^| )img(\d+)(?= |$)/)[2]){
5        $('#pict').attr('src','img/img'+num+'.jpg').attr('alt','img/img'+num+'.jpg');
6      }
7    })
8    .on('mouseout',function(){
9      $('#pict').attr('src','img/img1.jpg').attr('alt','img/img1.jpg');
10    });
11});