hoverで丸形の背景を表示させる方法【HTMLとCSS】

どうも。黒蛇です。

今回はhoverのときに丸形の背景を表示させる方法をご紹介します。

こちらです↓

解説もしているので、よろしければ参考にしてください。

ソースコード

ソースコードはこちらになります。

<div class="parent_div">
  <a href="#" class="sample_text">hoverのとき丸形の背景が浮かび上がります。</a>
  <span class="circle"></span>
</div>

  .parent_div {
    position: relative;
    display: inline-block;
  }
  .sample_text {
    color: #acacac;
    position: relative;
    z-index: 10;
    text-decoration: none;
  }
  .circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ffffff00;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 0;
    transition: .3s;
  }
  .sample_text:hover + .circle {
    background-color: #fff57d;
  }

解説

丸い背景を作る

まずは背景に表示させる丸い背景を作ります。

丸い背景部分のCSSはこのようになります。

  .circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff57d;
  }

display; inline-block; にすることで高さと幅を指定できるようになります。ここでは50pxにしてみました。そしてborder-radius: 50%; にすることで要素を円形にしています。塗りつぶしの色は#fff57dにしました。

丸い背景を中央に配置する

次に丸い背景を中央に配置します。
以下のCSSを追加することで中央に配置することができます。

  .parent_div {
    position: relative;
    display: inline-block;
  }

　　.circle {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
  }

丸い背景を絶対位置で指定するので、まずは親要素のdivに position: relative; を指定します。また、親要素のdivはblock要素なので今のままでは画面いっぱいに広がってしまいます。そこで display: inline-block; を指定して幅と高さをテキストと一致させるようにします。

そして子要素である丸背景部分に position: absolute; を指定し、right: 50%; 、top: 50%; にして中央に寄せます。また、このままでは若干中央からずれてしまうので、transform: translate(50%, -50%); で微調整します。

ここまででこのようになります。

丸い背景をテキストの後ろ側に配置する

このままではテキストの前に背景が来てしまっているので、背景をテキストの後ろに配置します。そのためのCSSは以下のようになります。

  .sample_text {
    position: relative;
    z-index: 10;
  }

  .circle {
    z-index: 0;
  }

テキストと背景は z-index で調節します。テキスト部分は背景部分と同様に親要素のdivを基準として z-index を指定したいので position: relative; を指定します。

これで背景をテキストの後ろ側に表示することができました。

hoverのときに丸い背景が表示されるようにする

あとはhoverしたときの処理を書けば完成です。

hover のときのCSSは以下です。

  .circle {
    transition: .3s;
    background-color: #ffffff00;
  }

  .sample_text:hover + .circle {
    background-color: #fff57d;
  }

背景がフワッと表視されるようにするため transition: .3s; を指定しました。また、hover する前は背景を隠しておきたいので background-color: #ffffff00; に変更して、hover したときに改めて background-color: #fff57d; を指定しました。

.sample:hover + .circle の部分についてですが、これは 「.sample が hover した場合の、すぐ下にいるの兄弟要素の .circle 」という意味です。「+」を使うと隣り合っている直後の要素を指定することができます。

これで、hover したときに丸形の背景が表示されるようになりました。見た目の問題で、リンク部分に以下のCSSを加えて見やすくしました。

  .sample_text {
    text-decoration: none;
    color: #acacac;
  }

完成です。
もう一度完成したものを載せています↓

まとめ

今回はhoverのときに丸形の背景を表示させる方法についてご紹介しました。ご参考になれば幸いです。

では、また。