CSSでマウスオーバーしたときのエフェクトを追加する方法！
「CSSでマウスオーバーしたときの処理方法について知りたい」
上記のような疑問を抱えている方もいるのではないでしょうか？
マウスオーバーしたときのエフェクトを追加することで、Webサイトの動きが出てユーザビリティの向上にもつながります。
今回、WEBCAMP MEDIAでは、CSSでマウスオーバーしたときのエフェクトを追加する方法について解説していきます。
- hoverとは
- エフェクト一覧
以上の項目について解説していきます。
この記事を読むことで、hoverを使ってマウスオーバーしたときの処理方法について理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSでマウスオーバーを設定するにはhoverを使う
hoverとは、HTML要素にマウスオーバーするとCSSを実行できる擬似要素です。
マウスオーバーとは、HTML要素にマウスカーソルを当てることを指します。
CSSでマウスオーバーを設定することでWebサイトにおしゃれなエフェクトを加えたり、ユーザーが使いやすWebサイト作成につながります。
たとえば、画像をマウスオーバーすると画像の説明を表示したり、入力欄をマウスオーバーすると入力する内容が吹き出しで表示することが可能です。
hover特長や使い方について詳しく知りたい方は、下記の記事を参考にしてみるとよいでしょう。
非公開: 【CSS】hoverってなに？初心者向けに使い方を解説！
CSSでマウスオーバーしたときのエフェクト一覧
CSSでマウスオーバーしたときに実行する主なエフェクトについて解説します。
色を変える
マウスオーバーしたとき文字色を変えるには、セレクタにhoverを指定し、colorプロパティで好きな色を指定します。
p:hover{
color: red;
}上記コードは、pタグにマウスオーバーすると文字が赤色に変化する処理です。
ほかにも、マウスオーバーした時に背景色を変える場合は、background-colorプロパティを指定します。
p:hover{
background-color: red;
}画像の上に文字を表示する
画像をマウスオーバーしたときに文字を表示するには、hoverとopacityプロパティを使います。
opacityは要素の不透明度を指定できるCSSプロパティです。
透明状態を表す0.0からはっきり表示される1.0までの数値で不透明度を設定します。
画像の上に文字を表示するには、文字にopacity:0;を指定して文字を非表示にして、マウスオーバーするときにopacity:1;を指定して文字を表示します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.container{
width:300px;
height: 300px;
overflow:hidden;
position:relative;
}
.text {
font-size:30px;
text-align:center;
color:#ffffff;
line-height: 300px;
}
.mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.4);
transition:all 0.2s ease;
}
.mask:hover {
opacity:1;
}
</style>
</head>
<body>
<div class="container">
<img src="test.png" alt="テスト">
<div class="mask">
<div class="text">文字表示のテスト</div>
</div>
</div>
</body>
</html>maskセレクタに背景を薄暗くして画像の中心に文字を表示するCSSを記述し、opacity:0で見えない状態にしています。
.mask:hoverにopacity:1を指定することで、マウスオーバーしたときにmaskセレクタに指定したCSSが実行されるという仕組みです。
吹き出しを表示する
マウスオーバーで吹き出しを表示するには、displayプロパティを使います。
吹き出しにdisplay:noneを指定して非表示設定し、マウスオーバーしたときdisplay:inline-blockを設定してインラインブロック要素として表示します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.container{
position: relative;
display: inline-block;
margin:100px;
}
.container p{
margin:0;
}
.speech {/*吹き出し部分*/
display: none;
position: absolute;
text-align: center;
padding: 10px;
font-size: 14px;
color: #fff;
border-radius: 10px;
background: #000;
width: 80px;
}
.speech:before {/*吹き出しの三角部分*/
content: "";
position: absolute;
top: 100%;
left: 40%;
border: 8px solid transparent;
border-top: 10px solid #000;
}
.container:hover .speech{/*吹き出しの場所を指定*/
display:block;
top: -250%;
left: -50%;
}
</style>
</head>
<body>
<div class="container">
<p>テスト</p>
<div class="speech">説明内容</div>
</div>
</body>
</html>speechセレクタに吹き出しのCSSを記述しており「.container:hover .speech」は、マウスオーバーしたときの吹き出しの処理方法について記述しています。
吹き出しの三角部分は、borderプロパティで全体を透明状態にしたあと、border-topで下向きの三角の形を作っています。
ほかにも、border-leftを指定すると右向き、border-bottomで上向きの三角形を作成できるので、場面に合わせて使い分けるとよいでしょう。
まとめ
今回は、CSSでマウスオーバーしたときのエフェクトを追加する方法について解説しましたが、いかがでしたでしょうか？
hoverとCSSプロパティを使うことで、マウスオーバーしたときさまざまなエフェクトを利用できます。
CSSでマウスオーバー時のエフェクトを使えるようになることで、表現の幅が広がるのでぜひ挑戦してみてくださいね！
