回答編集履歴

1

別のもっと簡単なやり方を見つけた

2021/05/05 04:05

投稿

Larkiwing
Larkiwing

スコア120

test CHANGED
@@ -67,3 +67,55 @@
67
67
  引用しただけなので、気になる場合はこちらから↓
68
68
 
69
69
  [display:none; VS visibility:hidden; VS opacity:0;](https://qiita.com/FJHoshi/items/0ed4b628acdab696be62)
70
+
71
+
72
+
73
+ ※2021/05/05追記
74
+
75
+ もっと簡単なやり方がありましたので追記します。
76
+
77
+
78
+
79
+ ```html
80
+
81
+ <div class="container1 wrapper">
82
+
83
+ ```
84
+
85
+ ```css
86
+
87
+ .wrap {
88
+
89
+ display: none;
90
+
91
+ }
92
+
93
+
94
+
95
+ .wrapper:hover .wrap{
96
+
97
+ display: block;
98
+
99
+ }
100
+
101
+ ```
102
+
103
+ でOKです。
104
+
105
+
106
+
107
+ ✅itagagakiさんからの指摘通りwrapperがないのでcontainer1にクラスをつけ加えます。
108
+
109
+ ✅そしてhoverした時に開いてほしい、.wrapper:hoverの中の.wrapと指定します。
110
+
111
+
112
+
113
+ すると出来上がりです。
114
+
115
+
116
+
117
+ この時の僕の間違いとしては、hoverした時に「来院入院の方」のクラスを指定して.wrapper:hover .header-leftにしてしまっていましたが、これだと動きません。対象となるクラスの一段下のクラスを用いて、今回であれば、wrapper:hover .wrapが正しいといえます。
118
+
119
+
120
+
121
+ 以上!