1,155 views
この記事は最終更新から 926日 が経過しています。
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;
}