どうも、ソエです。

最近、よく見るようになったマウスホバーでの画像切り替えを作ってみました。

参考程度に、どうぞ!

サンプル


仕組みのコード

HTML

<div class=”imgs”>
<img class=”mousemove” src=”画像URL” >
<img class=”mouseover” src=”画像URL”>
</div>

CSS

.imgs{
position:relative;
}
.mouseover{
position:absolute;
top:0;
}
.mouseover{
relative;
top:0;
}

JavaScript

let over=document.querySelector(“.mouseover”);
let move = document.querySelector(“.mousemove”);
over.addEventListener(“mouseover”,function(){
over.style.opacity=0;
});
over.addEventListener(“mouseout”,function(){
over.style.opacity=100;
});

終わりに

いかがでしたか?

今回は画像を切り替えるだけの動きですが、transitionなどを入れればスムーズに動いてみる人を楽しませれるので、ぜひ入れてみて下さい。

では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

マウスホバーすると画像が切り替わる仕組みを作る