【jQuery】マウスが乗った時にメッセージを表示させる

学習用に作ったチャットアプリにて。
写真左上のチャットグループの「編集ボタン」にアイコンを使用しており、
ぱっと見、何のボタンか分かりづらい。

今回は何をするアイコンか分かりやすくする方法を
ざくっとご紹介。

【完成形】

ホバー状態においては
何のボタンなのか分かるようにする。

1. 表示するメッセージの要素を追加

sample.haml

.main-header__edit-message  【ホバーで出てくるメッセージ】
  グループを編集する
%a
  = link_to edit_group_path(@group.id) do
    %i.far.fa-edit    【使っているアイコン】 

２. ホバー時以外は出てこないようにする

続いて今のメッセージにcssを当てます。
非表示状態にしているのは、【opacity】のところ。

sample.scss

~省略~

&__main-header {
    background-color: #fafafa;
    height: 70px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    &__edit-message {
      height: 30px;
      width: 180px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      background-color: black;
      color: #ffffff;
      opacity: 0;    ⬅️ここ
    }

~省略~

❗️「opacity」は要素の透明度を指定するプロパティ。
（ 0にすると完全に透明になる ）
  ( 1 だと表示される)

３. ホバー時に表示させる

ここからjsファイルへいきます。

sample.js

$(function(){

  $(".fa-edit").on( 'mouseover', function(){  //カーソルが乗った時
    $(".main-header__edit-message").css( 'opacity', '1')   
    $(".main-header__edit-message").css('transition', '0.3s')
  });
  $(".fa-edit").on( 'mouseout', function(){   //カーソルが外れた時
    $(".main-header__edit-message").css( 'opacity', '0')
    $(".main-header__edit-message").css('transition', '0.1s')
  });

~省略~

これでカーソルが乗った時と、外れた時にopacity【0 ・ 1】が入れ替わるようになります。
【transition】で動きの時間を指定しています。

---

ついでなので、
同じ要領で他のアイコンにも入れておきます。

---

今回の作業はこれで終了です。
ご覧いただきありがとうございました。