HTMLタグのデータ属性の中身を使って背景画像を変化させる方法

「ここへマウスホバー」へマウスホバーした時に、その文字の要素に含んでいるデータ属性の中身を「背景画像が変わる」の背景画像へ置き換えたいのですがどうすればよいですか

html

1<!DOCTYPE html>2<html>3 <head>4 <meta charset="UTF-8">5 <style>6 #change {7 background-image: url(sample3.png);8 width: 200px;9 height: 200px;10 }11 </style>12 </head>13 <body>14 15 <p onmouseover="hover()" data-png="sample1.png">ここへマウスホバー</p>16 <p id="change">背景画像が変わる</p>17 18 </body>19</html>

javascript

1 function hover(){2 const c1 = document.querySelector('[data-png]');3 change.style.backgroundImage = c1.dataset.png;4 }

backgroundImageをdatasetで書き換えるように命令していますが変化しませんでした
正しい指定方法を教えてください

コメントを投稿

0 コメント