CSSでマウスオーバーしたときのエフェクトを追加する方法!

公開日: 2021.11.10
更新日: 2024.01.03
cssでマウスオーバーしたときのエフェクトを追加する方法

「CSSでマウスオーバーしたときの処理方法について知りたい」

上記のような疑問を抱えている方もいるのではないでしょうか?

マウスオーバーしたときのエフェクトを追加することで、Webサイトの動きが出てユーザビリティの向上にもつながります。

今回、WEBCAMP MEDIAでは、CSSでマウスオーバーしたときのエフェクトを追加する方法について解説していきます。

  • hoverとは
  • エフェクト一覧

以上の項目について解説していきます。

この記事を読むことで、hoverを使ってマウスオーバーしたときの処理方法について理解できるので、ぜひチェックしてみてくださいね!

CSSでマウスオーバーを設定するにはhoverを使う

hoverとは、HTML要素にマウスオーバーするとCSSを実行できる擬似要素です。

マウスオーバーとは、HTML要素にマウスカーソルを当てることを指します。

CSSでマウスオーバーを設定することでWebサイトにおしゃれなエフェクトを加えたり、ユーザーが使いやすWebサイト作成につながります。

たとえば、画像をマウスオーバーすると画像の説明を表示したり、入力欄をマウスオーバーすると入力する内容が吹き出しで表示することが可能です。

hover特長や使い方について詳しく知りたい方は、下記の記事を参考にしてみるとよいでしょう。

非公開: 【CSS】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でマウスオーバー時のエフェクトを使えるようになることで、表現の幅が広がるのでぜひ挑戦してみてくださいね!


関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5