display:noneとdisplay:blockを使用した表示・非表示の切替え

Question

前提・実現したいこと

現在簡単なチャットアプリを作成しています。
そのアプリの中でカーソルをhoverすると非表示になっている内容を表示出来るようにしたいです。

発生している問題・エラーメッセージ

親要素である.moreに.more:hoverとし、display:blockを付けています。
そして子要素であるul.more_listにdisplay:noneを付けているのですが内容が消えたままで表示出来ません。

該当のソースコード

.contents.row
  - @items.each do |item|
    .content_post{:style => "background-image: url(#{item.image});"}
      .more
        %span= image_tag 'arrow_top.png'//ここにカーソルが当たるとliの中身を表示したいです。
        %ul.more_list
          %li
            = link_to '削除', item_path(item.id), method: :delete
      %p= item.memo
      %span.name
        =item.name

.contents.row {
  .content_post {
    margin: 20px 0;
    padding: 30px;
    position: relative;
    height: 400px;
    color: white;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(41, 41, 41, 0.2);
    .more {
      position: absolute;
      cursor: pointer;
      top: 20px;
      right: 30px;
      z-index: 2;
      height: 100px;
      width: 80px;
      text-align: right;
      ul.more_list {
        display: none;
        position: absolute;
        text-align: left;
        width: 80px;
        right: 0;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        border-radius: 3px;
        li {
          border-bottom: 1px solid #ddd;
          a {
            padding: 5px; 
          }
        }
      }
    }
  }
}

ul.more_list a:hover {
  background-color: #ffdddd;
  color: #dd0000; 
}

.more:hover {
  display: block;
}

body {
  line-height: 1.57;
  letter-spacing: 0.15em;
  font-size: 16px;
  color: #666;
  font-family: 'Unica One', "Avenir", "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: " ",;
  display: table;
}

form input, form textarea {
  width: 100%;
  margin: 5px 0 15px;
  padding: 10px;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  font-family: "游ゴシック", "YuGothic";
}

body {
  padding-top: 60px;
}

body, html {
  height: 100%;
  background-color: #f5f5f3;
}

img {
  display: inline-block;
  vertical-align: middle;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

試したこと

• display:none;をliに付けてみました。そして、ul.more_list：hover にdisplay:blockを付けてみました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

scss使ったことないし検証もしてないけど詳細度合わせるなら上から書かないとだめなんじゃ？

.contents.row {
  .content_post {
    /*margin: 20px 0;
    padding: 30px;
    position: relative;
    height: 400px;
    color: white;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(41, 41, 41, 0.2);*/
    .more:hover {
      /*position: absolute;
      cursor: pointer;
      top: 20px;
      right: 30px;
      z-index: 2;
      height: 100px;
      width: 80px;
      text-align: right;*/
      ul.more_list {
        display: block;
        /*display: none;
        position: absolute;
        text-align: left;
        width: 80px;
        right: 0;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        border-radius: 3px;
        li {
          border-bottom: 1px solid #ddd;
          a {
            padding: 5px; 
          }
        }*/
      }
    }
  }
}

Comments

[tsuyoshi-ri]

ありがとうございます。解決しました！
sousukeさんの仰られるように記述する位置の問題でした。
ありがとうございました。

[sousuke]

位置というよりか詳細度の問題です。scssはcssを簡単に書いているだけのはずですので、最終的に出力されるcssで詳細度が劣らないように書けばいいです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
cssを使う上で詳細度についての理解は必須だと思います。

[tsuyoshi-ri]

sousukeさん、詳細度の記事大変参考になりました。
詳細度について意識してコーディングが出来ていなかったので今後は詳細度についても考えながらcssを当てていきます。
本当にありがとうございました。

Answer 2

おはようございます。

.more:hover {
  display: block;
  ul.more_list {
    display: block; 
  }
}

これで如何でしょうか？

Comments

[tsuyoshi-ri]

おはようございます。
ご回答頂きありがとうございます。

上記のコードを試してみましたが挙動に変化はありませんでした。
何か他のcssが邪魔をしているのでしょうか、、、

[tomtomtomtom]

うーん
ざっとcssを拝見する限りではそのようには見えませんが、
cssそもそもの優先順位もあったかと思います。
一度、検証ツールで、.moreの:hoverにチェックを入れて、.more_listにどのようなcssがかかっているかを確認していただいてよろしいでしょうか？

[tsuyoshi-ri]

https://gyazo.com/e93ddb713b7749498594f8919f06b40b

[tsuyoshi-ri]

https://gyazo.com/0543fe1bdb1099ad4ca6375b9a972638

[tsuyoshi-ri]

https://gyazo.com/c1ad4dfab4207ea1a441d99a1e43a61e

[tsuyoshi-ri]

ありがとうございます。
more_listのhoverを検証してみました。
more_listのdisplay:blockが機能していないようなのですが、これが原因でしょうか？
仕事で返信が遅く、せっかくご返信頂いているのにすみません。

[tomtomtomtom]

恐らく記載する位置の問題ですね

.more:hover {
display: block;
ul.more_list {
display: block;
}
}

を
.more{
省略
}
のすぐ下に書いて下さい。

.more{
省略
}
.more:hover {
display: block;
ul.more_list {
display: block;
}
}

ちょっと}がいっぱい書かれているところになりますので、お間違えないようお願いいたします。
如何でしょうか？

[tsuyoshi-ri]

ありがとうございます！！解決しました！！
今後記述するhover:の位置を対象である要素の親要素よりも外に出さないように気をつけます。
大変勉強になりました。ありがとうございました。

[tomtomtomtom]

cssには優先順位があります。
・あとから書かれたもの（下の行に書かれたもの）が優先。←今回はこれはクリアしていました。
・詳しく書かれたものが優先
・近くに書かれたものが優先
※詳しく書かれたものとは？？
同じ、.moreをにdisplay:block;を付ける場合
.more{
display:block;
}
より
.contents.row .content_post .more{
display:block;
}
が優先。←今回問題になった点

※近くとは？
.contents.row .content_post .more{
display:block;
}
より
.more{style:"display:none;"}
が優先

※どうしても上手く行かない時は!importantもあります。

うろ覚えで申し訳ありませんが
そんな感じだったと思います^^

[tsuyoshi-ri]

tomさん、ありがとうございます！
非常に分かりやすく勉強になりました。
今後は優先順位の事もしっかりと考えながらコーディングしていきます！！
ありがとうございました！！