(115) マウスホバーされた時&外れた時に処理を実行したい。

投稿者: | 2022年2月28日

204 views

1. やりたいこと

マウスホバー時に自分の色を変えるぐらいであれば CSSだけで実現できる。

でも…
マウスホバーされた時&外れた時に
もっと複雑な処理をしたい!

のひな形を作ってみたい。

2. やってみる

仕様確認が目的なので、簡単なサンプルを作って学んでみる。

左右に四角形を表示し、
・左の四角形の上にマウスを移動したときに
・右の四角形が黄色に変化する。
そんなページを作ってみた。

https://www.dogrow.net/hp/sample/00115/

動作しているコードは以下の通り。
今回は JQueryを使った。ただの気まぐれ…

index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="AAA"></div>
    <div id="BBB"></div>
  </body>
</html>

script.js
hover( func1, func2 ) に渡しているパラメーターは以下の通り。
func1 : ホバー時に実行する関数
func2 : ホバー外れ時に実行する関数

$(function(){
  $('#AAA').hover(
    function(){                                            // ホバー時
      $('#BBB').css('background-color','#ff0');            //  → 背景を黄色に
    },function(){                                          // ホバー外れ時
      $('#BBB').css('background-color','transparent');     //  → 背景を透過に
    }
  );
});

style.css
今回の CSSはただの装飾目的のため、本稿の学習に以下のコードはまったく関係ない。
二つの四角形を区別したかったから装飾しただけだ。

div{
  position: absolute;
  width:  50px;
  height: 50px;
  border: 5px solid;
}

div#AAA{
  left: 100px;
  top:  100px;
  border-color: #f00;
}

div#BBB{
  left: 300px;
  top:  100px;
  border-color: #00f;
}

コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)