ドロップダウン（CSS）で親要素にカーソルを当てても子要素が現れない

親要素にカーソルを当てると子要素がひょうじ

現状の動画です

https://gyazo.com/dc3bb72b9a6ea22a2d3bc45e2bf3a015

上記のみだとわかりにくいので、display:noneをコメントアウトした状態も動画にしました。

https://gyazo.com/dc3bb72b9a6ea22a2d3bc45e2bf3a015

css
1.wrapper {
2  display: flex;
3}
4
5.side-bar {
6  width: 300px;
7  height: 100vh;
8  background-color: #253141;
9}
10
11.side-header {
12  height: 100px;
13  padding: 0 20px;
14  display: flex;
15  justify-content: space-between;
16  align-items: center;
17}
18
19.user-name a {
20  color: #fafafa;
21  font-size: 16px;
22  text-decoration: none;
23}
24
25.chat-create-btn a {
26  color: deepskyblue;
27  font-size: 10px;
28  padding: 14px;
29  border: 1px solid lightblue;
30  text-decoration: none;
31}
32
33
34.rooms {
35  height: calc(100vh - 100px);
36  background-color: #2f3e51;
37  padding: 0 20px;
38  overflow: scroll;
39}
40
41.room {
42  padding: 20px 0 40px;
43}
44
45.group-name a {
46  color: white;
47  text-decoration: none;
48}
49
50.chat {
51  width: calc(100vw - 300px);
52  background-color: #ffffff;
53}
54
55.chat-header {
56  height: 100px;
57  padding: 0 40px;
58  display: flex;
59  justify-content: space-between;
60}
61
62.chat-title {
63  font-size: 24px;
64  color: #333;
65  padding-top: 36px;
66}
67
68.chat-close-btn a {
69  padding: 20px;
70  border: 1px solid darkred;
71  color: darkred;
72  text-decoration: none;
73}
74
75.chat-close-btn {
76  margin-top: 40px;
77}
78
79.messages {
80  height: calc(100vh - 100px - 90px);
81  background-color: #fafafa;
82  padding: 40px 50px 0;
83  overflow: scroll;
84}
85
86.message {
87  position: relative;
88}
89
90.upper-message {
91  display: flex;
92  padding: 10px 0;
93}
94
95.message-user {
96  font-size: 20px;
97  color: gray;
98  padding-right: 40px;
99}
100
101.message-date {
102  font-size: 16px;
103  color: #999;
104}
105
106.lower-message {
107  font-size: 24px;
108  color: #434a54;
109  margin: 10px 30px 40px;
110}
111
112.lower-sub-message {
113  font-size: 16px;
114  color: #7d7e81;
115  margin: 5px 0 40px;
116}
117
118/* リストタグ */
119.right_content li:hover  {
120  opacity: 1;
121  visibility: visible;
122}
123
124.right_tag {
125  background-color: black;
126  margin-left: 40px;
127}
128
129.right_list {
130  text-decoration-line: none;
131  color: #253141;
132  font-size: 13px;
133  text-align: center;
134  background-color: #fff;
135  border: none;
136  border-radius: 0px;
137  padding: 5px 15px;
138}
139
140.right_content {
141  cursor: pointer;
142  right: 30px;
143  position: absolute;
144  display: flex;
145}
146
147.right_list {
148  position: relative;
149  float: left;
150}
151
152.right_list:hover {
153  background: #dbdbdb;
154}
155
156.right_content li:hover > ul {
157  display: block;
158}
159
160.right_list {
161  display: none;
162  width: 60px;
163  padding: 6px 10px;
164  webkit-transition-duration: 0.3s;
165  -moz-transition-duration: 0.3s;
166  transition-duration: 0.3s;
167}
168
169/* リストタグ終了 */
170
171.form {
172  height: 90px;
173  background-color: #dddddd;
174  padding: 20px 40px;
175  display: flex;
176}
177
178.form-input {
179  width: 100%;
180  display: flex;
181  background-color: white;
182}
183
184.form-message {
185  padding-left: 10px;
186  height: 50px;
187  width: 100%;
188  border: none;
189}
190
191.form-submit {
192  color: white;
193  background-color: #38aef0;
194  height: 50px;
195  padding: 0 20px;
196  margin-left: 15px;
197  border: none;
198  font-size: 16px;
199}
200
201.form-image {
202  font-size: 12px;
203  background-color: lightblue;
204  color: white;
205  padding: 12px;
206  width: 60px;
207  margin: 5px 10px;
208  text-align: center;
209}
210
211.hidden {
212  display: none;
213}
214
215
216
217

html
1
2<div class="message">
3  <div class="right_content">
4    <div class="check_box">
5        <%= check_box_tag :check1 %>
6        <%= label_tag :check1, "支払い済み" %>
7    </div>
8    <ul class="right_ul">
9      <li>
10        <%= image_tag 'arrow_top.png' , class: "right_tag" %>
11      </li>
12      <li>
13        <%= link_to '削除', room_message_path(@room, message) , method: :delete, class: "right_list" %>
14      </li>
15      <li>
16        <%= link_to '編集', "#" ,class: "right_list" %>
17      </li>
18    </ul>
19  </div>
20  <div class="upper-message">
21    <div class="message-user">
22      <!-- 投稿したユーザー名情報を出力する -->
23      <%= message.user.name %>
24
25    </div>
26    <div class="message-date">
27      <!-- 投稿した時刻を出力する -->
28      <%= l message.created_at %>
29
30    </div>
31  </div>
32  <div class="lower-message">
33    <div class="message-content">
34      <!-- 投稿したメッセージ内容を記述する -->
35      <%= "YOU ON ME!" %><br>
36      <% if message.content %>
37      <%= @room.currency.name %><%= message.content.to_s(:delimited) %><br>
38      <div class="lower-sub-message">
39        <%= "換算額は¥#{(message.content / @room.price * 100).floor.to_s(:delimited)}" %><br>
40        <%= "#{@room.number}人で割った1人分の金額は#{@room.currency.name}#{(message.content / @room.number).to_s(:delimited)}" %><br>
41        <%= "#{@room.number}人で割った1人分の換算額は¥#{(message.content / @room.price * 100 / @room.number).floor.to_s(:delimited)}" %>
42      </div>
43      <% end %>
44    </div>
45    <%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %>
46  </div>
47</div>
48
49

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

Ruby は全くわからないので、CSSの範囲で回答します。

↓これが隠すスタイルだと思います。

css
1.right_list {
2  display: none;

ご提示のコードには:hoverが3回出てきますが、
↓これと、

css
1.right_content li:hover  {
2  opacity: 1;
3  visibility: visible;
4}

↓これは、関係ないコードだと思います。

css
1.right_list:hover {
2  background: #dbdbdb;
3}

↓表示させるコードは、これだと思います。

css
1.right_content li:hover > ul {
2  display: block;
3}

ところが、HTMLを見ると、.right_listはul要素にはついていない（詳しくないですが、<%= link_to はa要素を作るのですよね？）ので、これは効果がないです。
と言いますか、おそらくこのHTMLには.right_content li > ulが存在しないと思います。

解決方法ですが、HTMLを見直して、適切な要素にスタイルを当てましょう。

投稿2021/02/25 02:31