質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

マウスオーバーするとliタグが表示されるようにしたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 185

keisuke.F

score 16

お世話になっております。
現在、カラオケの曲登録アプリを作成しております。

マウスオーバーするとliタグが表示されるようになったのですが、tableの高さが変わったり、アイコンの位置がずれてしまいます。
spanタグをtd内に記述していることが原因でしょうか。
しかし、td外にspanを書くとエラーが出ます。
何か良い方法はないでしょうか。

main.html.haml

.main
  .table-responsive
    %table.chart
      %thead
        %tr
          %th アーティスト
          %th タイトル
          %th レベル
      %tbody
        - @songs.each do |song|
          %tr
            %td
              = song.artist
            %td
              = song.title
            %td
              = song.level_i18n
            %td
              %span=image_tag 'arrow_top.png'
              %ul
                %li= link_to '編集', "/songs/#{song.id}/edit"
                %li= link_to '削除', "/songs/#{song.id}", method: :delete, data: { confirm: '削除しますか?' }

main.scss

.main {
  height: calc(100vh - 100px - 30px);
  background-color:   #808080;
  overflow: auto;
  .table-responsive {
    color: #fff;
    padding: 50px;
    font-size: 20px;
    .chart {
      width: 60%;
      height: 100vh;
      margin: 0 auto;
      thead {
        border-bottom: 2px dashed #87CEFA;
      }
      tbody {
        tr {
          border-bottom: 2px dashed #87CEFA;
          line-height: 5em
          span {
          }
          :hover ul{
            display: block;
          }
          ul {
            display: none;
            li {
              margin: 1em auto;  
              background-color: #f7f7f7; 
              border-left: 1px solid #d8d8d8;
              border-right: 1px solid #d8d8d8;
              box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
              border-radius: 4px;
              a {
                text-decoration: none;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
  .registration {
    .form-group {
      margin: 0 auto;
      width: 800px;
      display: flex;
      flex-direction: column;
      padding-top: 80px;
      .form-title {
        font-size: 20px;
        margin-top: 10px;
      }
      .form-control {
        margin-top: 5px;
      }
      .btn-primary {
        margin-top: 50px;
      }
    }
  }
}

よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る