高さが不明なコンテンツを、absolute位置のまま表示させることは可能か？

実現したいこと

CSSでホバーしたとき、目的の図ようにしたいのですが、CSSのコードはどうしたらいいかわかりませんでしょうか？

ちょうどteratailさんで、回答者アイコンにホバーしたときに、その範囲が大きくなるイメージです。

ソースコード

html
1<div class="grid-container">
2
3  <div class="g1">
4    <div class="under">
5      <div class="one">ここホバーで表示</div>
6      <div class="two">この高さは可変</div>
7    </div>
8  </div>
9  
10  <div class="g2">
11    
12  </div>
13  
14  <div class="g3">
15    
16  </div>
17  
18  <div class="g4">
19    
20  </div>
21  
22</div>
23
24<style>
25/* 下の部分 */
26.under {
27  position: absolute;
28  background: pink;
29  right: 10px;
30  left: 10px;
31  bottom: 0;
32  width: 150px;
33}
34
35.under .two {
36   display: none;
37}
38.under.hover .two {
39  display: block;
40}
41
42/* グリッドレイアウト */
43html, body, .grid-container { height: 100%; margin: 0; }
44.grid-container > div { 
45 box-shadow: 3px 3px 3px gray;
46 position: relative;
47 padding: 10px;
48 margin: 10px
49}
50.grid-container {
51  display: grid;
52  grid-template-columns: 1fr 1fr;
53  grid-template-rows: 1fr 1fr;
54  grid-template-areas: "g1 g2" "g3 g4";
55}
56.g1 { grid-area: g1; }
57.g2 { grid-area: g2; }
58.g3 { grid-area: g3; }
59.g4 { grid-area: g4; }
60
61</style>
62
63<script>
64$('.under').hover( 
65function(){$(this).addClass('hover');},  
66function(){$(this).removeClass('hover');}
67);
68</script>

###目的の図

###詳細と問題点
実現したい機能を具体的に言いますと、<div class="one">ここホバーで表示</div>はabsoluteで.g1の下に置いておきつつ、ホバーしたらその位置と高さのままで、<div class="two">この高さは可変</div>を下に表示したいという機能になります。

今回の件で難しい問題は、<div class="two">この高さは可変</div>とあるように、ホバーで表示させる部分の高さが未定であるという点と、<div class="one">ここホバーで表示</div>はabsoluteであるという点だと思います。

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

回答2件

ベストアンサー

JavaScript不使用ですが。

CSS
1.under {
2  position: absolute;
3  background: pink;
4  right: 10px;
5  left: 10px;
6  /*bottom: 0;*/
7  top: calc(100% - 1.5em);/* line-heightが1.5のとき */
8  width: 150px;
9}
10
11.under:hover .two {
12  display: block;
13}
14```**動くサンプル：**[https://jsfiddle.net/j48xm2o1/](https://jsfiddle.net/j48xm2o1/)

投稿2018/12/03 02:31

kei344

総合スコア69398

gankonako

2018/12/03 10:26

下固定なのに上を指示する逆転の発想はさすが、総合２位は伊達じゃありませんね。ありがとうございます。

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

こんな感じでしょうか（HTMLはそのまま）

css
1/* 下の部分 */
2.under {
3  position: absolute;
4  left: 10px;
5  bottom: 0;
6  width: 150px;
7  background: pink;
8}
9.under .two {
10  display: none;
11  background: inherit;
12}
13
14/* グリッドレイアウト */
15html, body, .grid-container {
16  height: 100%;
17  margin: 0;
18}
19.grid-container > div { 
20 box-shadow: 3px 3px 3px gray;
21 position: relative;
22 padding: 10px;
23 margin: 10px
24}
25.grid-container {
26  display: grid;
27  grid-template-columns: 1fr 1fr;
28  grid-template-rows: 1fr 1fr;
29  grid-template-areas: "g1 g2" "g3 g4";
30}
31.g1 { grid-area: g1; }
32.g2 { grid-area: g2; }
33.g3 { grid-area: g3; }
34.g4 { grid-area: g4; }

JavaScript
1$(function(){
2
3    // 親要素からのTOP位置を固定
4    $('.under').each(function(){
5        $(this).css({
6            'top': $(this).position().top
7        });
8    });
9
10    // ホバー時の動作
11    $('.under').hover(
12        function(){
13            $(this).find('.two').show();
14        },
15        function(){
16            $(this).find('.two').hide();
17        }
18    );
19});