質問編集履歴
2
teratail例
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
CSSでホバーしたとき、目的の図ようにしたいのですが、CSSのコードはどうしたらいいかわかりませんでしょうか？
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ちょうどteratailさんで、回答者アイコンにホバーしたときに、その範囲が大きくなるイメージです。
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
|
|
7
7
|
### ソースコード
|
|
8
8
|
[https://jsfiddle.net/xzta0423/](https://jsfiddle.net/xzta0423/)
|
|
9
9
|
|
|
@@ -80,4 +80,9 @@
|
|
|
80
80
|
|
|
81
81
|
###目的の図
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
###詳細と問題点
|
|
86
|
+
実現したい機能を具体的に言いますと、``<div class="one">ここホバーで表示</div>``は``absolute``で``.g1``の下に置いておきつつ、ホバーしたらその位置と高さのままで、``<div class="two">この高さは可変</div>``を下に表示したいという機能になります。
|
|
87
|
+
|
|
88
|
+
今回の件で難しい問題は、``<div class="two">この高さは可変</div>``とあるように、ホバーで表示させる部分の高さが未定であるという点と、``<div class="one">ここホバーで表示</div>``は``absolute``であるという点だと思います。
|
1
コードをくくった
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
CSSでホバーしたとき、目的の図ようにしたいのですが、CSSのコードはどうしたらいいかわかりませんでしょうか？
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
実現したい機能を具体的に言いますと、``<div class="one">ここホバーで表示</div>``は``absolute``で``.g1``の下に置いておきつつ、ホバーしたらその高さのままで、``<div class="two">この高さは可変</div>``を下に表示したいという機能になります。
|
|
5
5
|
|
|
6
|
+
難しい問題は、``<div class="two">この高さは可変</div>``とあるように、ホバーで表示させる部分の高さが未定であるという点です。
|
|
6
7
|
### ソースコード
|
|
7
8
|
[https://jsfiddle.net/xzta0423/](https://jsfiddle.net/xzta0423/)
|
|
8
9
|
|