どうも、ソエです。
最近、よく見るようになったマウスホバーでの画像切り替えを作ってみました。
参考程度に、どうぞ！
サンプル
仕組みのコード
HTML
<div class=”imgs”>
<img class=”mousemove” src=”画像URL” >
<img class=”mouseover” src=”画像URL”>
</div>
<img class=”mousemove” src=”画像URL” >
<img class=”mouseover” src=”画像URL”>
</div>
CSS
.imgs{
position:relative;
}
.mouseover{
position:absolute;
top:0;
}
.mouseover{
relative;
top:0;
}
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;
});
let move = document.querySelector(“.mousemove”);
over.addEventListener(“mouseover”,function(){
over.style.opacity=0;
});
over.addEventListener(“mouseout”,function(){
over.style.opacity=100;
});
終わりに
いかがでしたか？
今回は画像を切り替えるだけの動きですが、transitionなどを入れればスムーズに動いてみる人を楽しませれるので、ぜひ入れてみて下さい。
では、ご閲覧ありがとうございました。
