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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

CSS

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

Q&A

解決済

2回答

2802閲覧

特定領域のみhoverを維持したい

gobindar

総合スコア51

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

CSS

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

0グッド

0クリップ

投稿2019/06/29 10:43

編集2019/07/16 05:03

お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。

やりたいこと

サイドバーを使用して、階層化されたリスト(第一階層上のliをhoverするとそれに合った第二階層が表示される)
を表示する上で、特定の領域であれば、li要素からマウスが離れてもhoverを維持するようにしたいです。
具体的には、ヤフオク(https://auctions.yahoo.co.jp/)の左側、
「カテゴリから探す」の項目を選択すると、
黒い領域がでてくるかと思いますが、
こういった黒い領域に階層化されたリストを表示していきたいため、
2つ目の階層(ヤフオクだと「コンピュータ」などのカテゴリにあたる。
1つ目の階層はヤフオクの「コンピュータ」にあたる。)を離れて、
3つ目の階層(ヤフオクにはないが、「コンピュータ」をhoverすると黒い領域の別部分に
コンピュータをさらに細分化したカテゴリが表示されるイメージ)を選択するまでの間に黒い領域を通って、
その際に階層2のhoverが消えないようにしたいです。
※階層1は、
下記に記載されております
sidebar_bgを階層のバック部分として考えました。
(最初からサイドバーに見えている階層1をhoverすると、階層2と共に
sidebar_bgが現れる。)
しかし、階層2から3に移動する間に、親要素である
sidebar_bgを通過するので、階層2でhoverした内容を
維持して階層3を選択できません。

jqueryを使用することも検討しましたが、
ul、li要素をデータベースから引っ張ってきて取得しており、
かつ5階層あるため、
「何番目の要素をhoverすると〜〜」
といったコーディングが非常に煩雑になるので、
さらに有力な方法がないか、当質問に至りました。

宜しくお願い致します。

現状

html

1 2<div class="sidebarconts"> 3 <ul> 4 @foreach($side_category[1] as $category1 => $val1) 5 <li class="sideli1 ml-3"><a tabindex="-1" href="#">{{$val1['category_name']}}</a> 6 @php $count1 = 0 @endphp 7 @foreach($side_category[2] as $category2 => $val2) 8 @php $count2 = 0 @endphp 9 @if($val2['data-belongsto'] == $category1) 10 @php $count1++; @endphp 11 @if($count1 == 1) 12 <div class="sidebar_bg"> 13 <ul class="sideul1"> 14 @endif 15 <li class="sideli2"> <a class="side_blue_b ml-1 pl-1" href="#">{{$val2['category_name']}}</a> 16 @foreach($side_category_case[3] as $category3 => $val3) 17 @php $countcase3 = 0 @endphp 18 @if($val3['data-belongsto'] == $category2) 19 @php $countcase2++; @endphp 20 @if($countcase2 == 1) 21 <ul class="sideul2"> 22 @endif 23 <li class="sideli3"><a class="side_blue_b ml-1 pl-1" href="#">{{$val3['category_name']}}</a> 24 @foreach($side_category_case[4] as $category4 => $val4) 25 @php $count4 = 0; @endphp 26 @if($val4['data-belongsto'] == $category3) 27 @php $count3++ @endphp 28 @if($count3 == 1) 29 <ul class="sideul3"> 30 @endif 31 <li class="sideli4 "><a class="side_blue_b ml-1 pl-1" href="#">{{$val4['category_name']}}</a> 32 @foreach($side_category[5] as $category5 => $val5) 33 @if($val5['data-belongsto'] == $category4) 34 @php $count4++ @endphp 35 @if($count4 == 1) 36 <ul class="sideul4"> 37 @endif 38 <li class="sideli5 "><a class="side_blue_b ml-1 pl-1" href="#">{{$val5['category_name']}}</a></li> 39 @endif 40 @endforeach 41 @if($count4 !== 0) 42 </ul> 43 @endif 44 </li> 45 @endif 46 @endforeach 47 @if($count3 !== 0) 48 </ul> 49 @endif 50 </li> 51 @endif 52 @endforeach 53 @if($count2 !== 0) 54 </ul> 55 @endif 56 </li> 57 @endif 58 @endforeach 59 @if($count1 !== 0) 60 </ul> 61 </div> 62 @endif 63 </li> 64 @endforeach 65 </ul> 66 </div> 67

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

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

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

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

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

yasutomi

2019/06/29 11:49

CSSの質問であれば回答者が回答しやすいよう HTMLで記載したほうが良いです。
gobindar

2019/07/16 04:55

yasutomi様 お返事遅れ申し訳ありません。 修正依頼ありがとうございます。 対処法を見つけましたので、自己解決でクローズさせていただきます。
guest

回答2

0

目指す内容はあまりわかりませんが、ビューで複雑な振り分け処理が問題ということであれば、
Laravelのコレクション処理で事前にふるい分けしておくと、シンプルになるかもしれません。
Laravel 5.5 コレクション

投稿2019/07/01 12:50

aro10

総合スコア4106

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

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

gobindar

2019/07/16 04:58

aro10様 お返事遅れ申し訳ありません。 ご回答ありがとうございます。 振り分けというより、元々階層化されたデータを、 hoverされた内容に合わせて表示するのが目的で、 Controllerで既に各階層データをふるい分けしており、 あとはhoverされた要素の下に紐づく階層を表示するだけの状態でした。 解決法を見つけましたので、自己解決にてクローズさせていただきます。 ご回答、誠にありがとうございました。
guest

0

自己解決

ul層(各階層の列)同士をmarginで離してしまうとul間(階層間)の移動時にhoverが外れてしまうので、
ulはpadding,liはmarginで、それぞれの階層の横幅を確保しつつ
隣の階層と、空いているようにみえるが、実際要素上は空いておらず、要素が連続している
(=背景を通過しないので、hoverも外れない)状態を作成しました。

投稿2019/07/16 05:01

gobindar

総合スコア51

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問