回答編集履歴
1
別のもっと簡単なやり方を見つけた
answer
CHANGED
|
@@ -32,4 +32,30 @@
|
|
|
32
32
|
|opacity:0;|o|o|
|
|
33
33
|
|
|
34
34
|
引用しただけなので、気になる場合はこちらから↓
|
|
35
|
-
[display:none; VS visibility:hidden; VS opacity:0;](https://qiita.com/FJHoshi/items/0ed4b628acdab696be62)
|
|
35
|
+
[display:none; VS visibility:hidden; VS opacity:0;](https://qiita.com/FJHoshi/items/0ed4b628acdab696be62)
|
|
36
|
+
|
|
37
|
+
※2021/05/05追記
|
|
38
|
+
もっと簡単なやり方がありましたので追記します。
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<div class="container1 wrapper">
|
|
42
|
+
```
|
|
43
|
+
```css
|
|
44
|
+
.wrap {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.wrapper:hover .wrap{
|
|
49
|
+
display: block;
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
でOKです。
|
|
53
|
+
|
|
54
|
+
✅itagagakiさんからの指摘通りwrapperがないのでcontainer1にクラスをつけ加えます。
|
|
55
|
+
✅そしてhoverした時に開いてほしい、.wrapper:hoverの中の.wrapと指定します。
|
|
56
|
+
|
|
57
|
+
すると出来上がりです。
|
|
58
|
+
|
|
59
|
+
この時の僕の間違いとしては、hoverした時に「来院入院の方」のクラスを指定して.wrapper:hover .header-leftにしてしまっていましたが、これだと動きません。対象となるクラスの一段下のクラスを用いて、今回であれば、wrapper:hover .wrapが正しいといえます。
|
|
60
|
+
|
|
61
|
+
以上！
|