初歩的なミスだと思うのですが、コンソールエラーなど表示されておらず原因がわからないので質問させてください。
とある教材のマウスオーバー、マウスアウトをjavascript下で行うといったシンプルなものです。
ディレクトリは一時的に試すだけだったのでダウンロードディレクトリで行なっております。
状況としてはホバー処理のみ効かない状態です。
下記ダウンロード配下使用ファイル
a.html
a.js
a.JPG
b.jpg
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8</head> 9<body> 10 <img src="a.JPG" alt="猫" width="300px" id="catImg"> 11</body> 12</html> 13
css
1 2window.addEventListener("DOMContentLoaded", function(){ 3 var image = document.getElementById("catImg"); 4 // マウスオーバー時 5 image.addEventListener("mouseover", function(event){ 6 this.src = "b.jpg"; 7 }); 8 9 // マウスアウト 10 image.addEventListener("mouseout", function (event) { 11 this.src = "a.JPG"; 12 }); 13}); 14
何かアドバイスいただけますと幸いです。
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/28 09:27