マウスオーバー(mouseenter)とマウスアウト(mouseleave)を使ってimgタグのsrc要素を入れ替え表示
- 2019.07.24
- JavaScript jQuery
- mouseenter, mouseleav, マウスアウト, マウスオーバー

jQueryのmouseenterとmouseleaveを使って画像タグのsrc要素を入替え表示してみます。
1.CSSの記述例
以下は任意です。
<style> .clWrap{ width:700px; margin:0 auto; text-align:left; } .clMouseArea{ width:150px; margin:0 auto; border:solid 1px #CCCCCC; cursor:pointer; } </style>
2.読込むJsファイルとJavaScriptの記述例
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".clMouseArea").live({ mouseenter:function(){ $(".clMouseArea img").hide().attr('src','mouseenter.jpg').fadeIn(500); }, mouseleave:function(){ $(".clMouseArea img").hide().attr('src','mouseleave.jpg').fadeIn(500); } }); }); </script>
3.HTMLの記述例
<div class="clMouseArea"> <img src="nomouse.jpg" alt="マウスオーバーするエリアの画像" width="150" height="150"> </div> <!--/clMouseArea-->
-
前の記事
指定のタグをループ(setTimeout)で動かし続ける仕組み 2019.07.23
-
次の記事
jquery.vortex.js:後ろから前へコンテンツエリアを回転表示 2019.07.25