質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3515閲覧

absolute要素に対するhoverが効かない

SugiuraY

総合スコア317

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/05/02 02:06

編集2019/05/02 03:26

下記コードのように.inner_1要素にhoverした時に、.inner_2が表示されるようにcssを書いたのですが
実際には表示されません(display:blockが効かない) JSFiddle

レイヤーの問題かと考え、それぞれpositionとz-indexを設定したのですが、昨日いたしません。
.inner_1にhoverした時に、.inner_2を表示させたいのですが、問題点と解決法をアドバイスください。

よろしくお願い申し上げます。

html

1<div class="wrapper"> 2 <span class="inner_1">hover</span> 3 <span class="inner_2">pop</span> 4</div>

css

1.wrapper{ 2 width:100px; 3 height:100px; 4 background:gray; 5 position:relative; 6 z-index:1; 7} 8 9.inner_1{ 10 cursor:pointer; 11 position:absolute; 12 width:50px; 13 height:20px; 14 background:blue; 15 top:70px; 16 left:0px; 17 z-index:1; 18} 19 20.inner_2{ 21 display:none; 22 cursor:pointer; 23 position:absolute; 24 width:50px; 25 height:20px; 26 background:pink; 27 top:70px; 28 left:90px; 29 z-index:2; 30} 31.inner_1:hover .inner_2{ 32 display:block; 33}

コードの再掲(より詳細なもの)
JSFiddle

html

1<div class="wrapper"> 2 <div class="effect"></div> 3 <form class="" action="#" method="post"> 4 <span class="logout"> 5 <button class="logout_button" type="submit" name="logout" value="logout"> 6 <i class="fas fa-sign-out-alt"></i> 7 </button> 8 </span> 9 </form> 10 <span class="logout_pop">ログアウト</span> 11</div>

css

1.wrapper{ 2 width: 200px; 3 height: 100px; 4 float: left; 5 text-align: center; 6 position: relative; 7 box-sizing: border-box; 8 overflow: hidden; 9 margin-left: auto; 10 z-index: 1; 11 background:gray; 12} 13 14.effect{ 15 width:200px; 16 height:100px; 17 left:-200px; 18 top:-100px; 19 background:#c7c7c778; 20 position:absolute; 21 transition:all .5s ease; 22 z-index:2; 23} 24 25.wrapper:hover .effect{ 26 left:0;top:0; 27} 28 29.logout{ 30cursor: pointer; 31margin-left: 10px; 32position: absolute; 33top:17px; 34right:5px; 35z-index: 10; 36opacity: 0; 37} 38 39.wrapper:hover .logout{ 40 display: block; 41 opacity: 1; 42} 43 44.logout_pop{ 45 cursor:pointer; 46 display: none; 47 background:#b3b3b36b; 48 position: absolute; 49 top: 5px; 50 height: 27px; 51 border-radius: 5px; 52 right: 97px; 53 font-size: 11px; 54 z-index: 100; 55} 56 57.logout:hover + .logout_pop{ 58display: block; 59}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.inner_1:hover .inner_2 これは.inner_1 の中に .inner_2 が入っている状態でしか効きませんよ。

CSS

1.inner_1:hover + .inner_2{ 2 display:block; 3} 4```**動くサンプル:**[https://jsfiddle.net/3m09pabe/](https://jsfiddle.net/3m09pabe/) 5 6--- 7 8【CSSのセレクタチートシート | webliker】 9[https://webliker.info/css-selector-cheat-sheet/](https://webliker.info/css-selector-cheat-sheet/) 10 11【CSSのセレクタとは?覚えておきたい25種類と書き方】 12[https://saruwakakun.com/html-css/reference/selector](https://saruwakakun.com/html-css/reference/selector) 13 14 15 16 17--- 18 19**追記:** 20 21記事本文の追記に対して。 22 23```CSS 24.wrapper:hover .logout:hover + .logout_pop{ 25display: block; 26}

HTML

1<div class="wrapper"> 2 <div class="effect"></div> 3 <form class="" action="#" method="post"> 4 <span class="logout"> 5 <button class="logout_button" type="submit" name="logout" value="logout"> 6 <i class="fas fa-sign-out-alt"></i> 7 </button> 8 </span> 9 <span class="logout_pop">ログアウト</span> 10 </form> 11</div> 12```**動くサンプル:**[https://jsfiddle.net/05ybq2wz/](https://jsfiddle.net/05ybq2wz/)

投稿2019/05/02 02:27

編集2019/05/02 03:48
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/05/02 03:24

kei344様 ご回答ありがとうございます。 セレクタの書き方について、包含すれる要素か否かで記法が異なることについて、よくわかりました。 一方で、これを実際のコードに適用した時に、問題の切り分けが適切ではないことがわかりました。 誠に申し訳ございません。 実際に適用したものを上記に再掲させていただきます。 実際にはabsoluteとhoverの関係とは関連がなく、hoverが実行されません。 具体的には .logout:hover + .logout_pop{ display: block; } の箇所が効いておりません。 <やりたいこと> .wrapperをhoverすることで出現す.logoutをさらにhoverすることで.logout_popを表示したい ということになります。 本件について、そもそもhoverして出現した要素にhoverが効くのか試したところ、それ自体は問題がなかったため、なぜ実行できないのかわからなくなってしまいました。 本当に重ねて申し訳ございませんが、何卒、お力添えのほど、よろしくお願い申し上げます。
kei344

2019/05/02 03:47

+ は兄弟要素なので.logout_popをformの中に入れるか、formのhoverを取るかどちらかです。
SugiuraY

2019/05/02 15:16

コメント誠にありがとうございます。 ご返信が遅くなってしまったのも、実はいただいたコメントからずっと内容を確認しあれでもないこれでもないをやっていました。 その結果、おそらく実装は不可能なのかと思い最後にコメントさせていただきました。 と申し上げるのも本番の環境では、wrapperはover-flow:hiddenが設定されていることから、実際には <span class="logout_pop">ログアウト</span>は.wrapper内でしか表示されないことになってしまうため、これを外に出す必要があることがわかりました。 つまり、.logout_popは.wrapperと兄弟要素になります。すると、.wrapper要素がhoverの時に出現するその孫要素である.logoutにもhoverがかかっている時に.wrapperの兄弟要素である.logout_popのdisplayをblockにするということになり、親要素がcss3では指定できない以上、CSSではこれが実装できないと思いました。。念のために、この考えで誤認がないかお尋ねさせてください。 これを端的に示したJSFiddleがこちらになります。https://jsfiddle.net/us3gnkyt/ 1日、悪戦苦闘しましたが、これでダメなら諦めようと思います。 重ねてご負担をお掛けしてしまっていることをお詫びいたします。 よろしくお願い申し上げます。
kei344

2019/05/02 15:28

「端的に示したJSFiddle」は親子関係を無視しているため当然できません。(セレクタを学習してください) 実際のHTML構造と、実際のCSSと、完成イメージを提示してから「最後のコメント」をしてください。そうでなければ SugiuraY さんの思い込みなのか、CSSでは出来ないのかを判断することが出来ません。
SugiuraY

2019/05/02 15:59 編集

意図をうまく伝えることができず申し訳ございません。 御呈示いただいたコードから変更箇所は 1) <span class="logout_pop">ログアウト</span>を外に出し.wrapperと兄弟要素となる 2) .wrapperにoverflow:hiddenを追加している 3) .logout_popはoverflow:hiddenの外に表示させたいため、topプロパティを20pxからあえて200pxに変更 https://jsfiddle.net/f9xnc3zv/1/ こちらが最終的なhtmlとcssの形で wrapper:hover .logout:hoverの時に wrapperの兄弟要素となるlogout_popのdisplayをcssを用いて、blockに変更することは困難であると1日作業して感じました。なぜなら.logoutから見た場合の親要素の兄弟要素となるlogout_popをCSSのセレクタで指定することがCSS3では実装されていないというところが行き着いた結論となっております。これをCSSで実装することはその通り不可能なことを確認したかったということになります。 重ねてお詫び申し上げます。よろしくお願い申し上げます。
kei344

2019/05/02 16:34

たとえば今のコードであれば .wrapper に over-flow:hidden を設定する必要性がありません。(はみ出る可能性のある要素が無いから)あと、HTMLの構造を変えることが問題ないなら.logoutを外に出せば特に問題が無いです。(.effectは .wrapperの親要素のhoverで処理すればよい) 「実際のHTML構造と、実際のCSSと、完成イメージを提示してから」というのは「何が問題になってこういう構造をとる必要があるのか」がわからないので聞いていました。 組み方の問題で、難しく考えているのだろうと推測します。たぶんCSSでも解決できると思いますが、JavaScriptで処理されたほうが早いかもしれませんね。
SugiuraY

2019/05/05 14:15

コメントいただきありがとうございます。 まさに難しく考えていて、.logoutを外に出して容易に解決することができました。。これがドツボにはまってしまい、自分では盲目的になっていました。ありがとうございます。 また、今後質問させていただくときに、このように伝えれば良いのかと諸々ヒントをいただきました。 なかなか、自分では解決したい問題点を整理できていても、この場で明確にお伝えすることはやはり難しいことだと実感いたしました。今後も精進をいたします。 改めて、御礼申し上げます。 よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問