HTML・CSSを使ったマウスオーバー時の挙動変化方法を解説※HTMLのみでも可能
マウスオーバーとは
マウスオーバー(ロールオーバー)とは、ブラウザなどの操作画面にある対象物に対してマウスカーソル(ポインタ)を重ねることです。
今回はマウスオーバーした際に対象物の挙動が変化する方法について解説していきます。
HTMLのみでも可能なので、積極的に取り入れてリッチなサイト制作にお役立てください。
画面上に表示された小さな矢印などのカーソルをマウスなどでポインティングデバイスで動かして操作する方式のコンピュータやソフトウェアで用いられる手法で、対象にカーソルが重なっている間だけ表示状態が切り替わったり、あらかじめ設定された操作や処理が行われたりする。対象の属性や状態をツールチップやポップアップなどで表示するなど、利用者に補助的な情報を知らせるために用いられることが多い。
スマートフォンなどタッチパネル方式で画面に触れて位置を指示するタイプのコンピュータやソフトウェアではマウスカーソルに相当する表示要素がないため、マウスオーバーによる表示・操作も利用できない。
IT用語辞典 e-Words
使用例
主な使用例としては、対象物をクリックしたときに別のページに遷移できることがわかる見た目にします。
対象物のリストとしては「テキスト、ボタン、画像」などがあり、テキストであれば、引用元にリンクが張ってある場合が多く、ボタンであればお申込みページなどへの誘導、画像の場合はより詳しいページへの遷移でしょうか。
以下に対象物ごとのよく使われる変化方法をまとめました。
今回はこの使用例をもとに実際のコードのを掲載しています。
- テキストの場合:文字色の変化
- ボタンの場合:背景色の変化
- 画像の場合:透明度の変化
HTMLのみで実装
まずはHTMLのみで実装してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://web-camp.io/">
<img
src="image/一時停止ボタン.png"
onmouseover="this.src='image/再生ボタン.png'"
onmouseout="this.src='image/一時停止ボタン.png'"
>
</a>
</body>
</html>
<img>要素の中のonmouseoverというのがマウスが対象物に乗っているときの処理になり、onmouseoutというのが、乗っていないときの処理になります。
この場合ですと、常に停止ボタンが表示されており、マウスオーバーすると再生ボタンが表示されるようになっています。
HTMLだけでは、イメージ要素の入れ替えが一番わかりやく、簡単です。
しかしmouseoverとmouseoutでは表現の幅が狭く、やりたいことができません。
CSSも使って実装
CSSのhover:を使うことで、HTMLのみで実装するよりもはるかに自由度の高い変化を与えることができます。
文字色の変更
まずはリンクを作成し、マウスオーバーしたときにテキストカラーを赤色に変更してみましょう。
HTMLファイルのheadタグ内に<link rel=”stylesheet” href=“styles.css”>を追記し、styles.cssファイルを作成しておきましょう。
※上記マーカーの”styles.css”をAlt+クリックもしくはCommand+クリックすることでファイル作成が可能ですよ。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a class="link-text" href="https://web-camp.io/">DMM WEB Campへのリンク</a>
</body>
</html>
styles.css
.link-text:hover {
color: red
}
変更したい対象物のクラス名やid名に対してhover:を追記し、いつも通りCSSを記述するだけでテキストカラーを変化させることができました。
ボタンの変更
続いてクリックしたくなるボタンを作成してみましょう。
WEBサイト作るうえでユーザーが押したくなるボタンを作ることは非常に大事なことです。
なにも変化のないボタンであれば、ボタンと認識されない可能性もあります。
index.html
<a class="button" href="https://web-camp.io/">お申し込みはこちらから</a>
styles.css
.button {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
background: #333;
padding: 18px 30px;
border-radius: 6px;
transition: .3s;
}
.button:hover {
background-color: #59b1eb;
}
背景色がふわっと変わるデザインができたと思います。
もともとのbuttonクラスにtransitionを設定することで3秒かけて変化するようにしました。
その他の設定はどのようなボタンを作るかによって変わってくるので、適宜変更してお使いください。
画像にオーバーレイを施す
ホームページなどで、画像に薄い色がかかる処理を見たことがありませんか?
オーバーレイとは、重ねる、被せる、覆うというような意味があります。
既存の画像にオーバーレイを付けて背景色を少し暗くすることで、その上に表示する文字が見やすくなります。
index.html
<img src="https://web-camp.io/magazine/wp-content/uploads/2022/02/css-zoom2.png">
<div class="readmore"><a href="#">read more</a></div>
styles.css
img {
position: relative;
width: 300px;
height: 200px;
}
.readmore {
width: 300px;
height: 200px;
position: absolute;
background: rgba(0,0,0,0);
opacity: 0;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
transition: .3s;
}
.readmore:hover {
background: rgba(0,0,0,0.5);
opacity: 1;
}
a {
text-decoration: none;
color: white;
}
イメージ画像に対して、透明な画像を上乗せしておくために、 position: relative; を設定します。透明画像には position: absolute; を設定してください。
あとは先ほどと同じでhoverしたときに変化するCSSを記述します。
今回はrbgaで設定した透過度を0.5にしてオーバーレイを作成しました。
まとめ
マウスオーバー(ロールオーバー)を設定することで、動きのあるWEBサイトを作ることができます。
HTMLとCSSのみで作成可能ですし、コピペ可能な素材もたくさんありますので、
興味のある方は探してみるのもよいでしょう。
Progateのサイト模写をしているときに、マウスホバー時のアクションがうまく設定できずに苦しんだ経験があります。
わかってしまえばなんてことはないのですが、初学事は処理概要を覚えるよりもまず手を動かして、実践していくことが重要です。
後々振り返ったときに誰かに説明できるようになっているので、この記事を参考にしながら、マウスホバーを実装してみてください。