Q&A
ありがとうございます！中に含まれているリスト達は除きたいです。
むしろ何も気にしなければ中に含まれているリスト達も含まれてしまうようで・・
前提・実現したいこと
li要素にマウスが乗った時に背景色を変更させたいのですが
リストタグが入れ子だった場合、li要素の下のulの要素もすべて背景色が変わってしまいます。
liタグのテキストエリアのみ(リストのマークも一緒に)背景色を変更する方法はありますか？
たとえば以下のようなリストタグがある場合、
全ての項目、ホバー時背景色をその行だけ(・や1.のようなリストのマークも一緒に)変えたいのです
・アプリ(ul)
・WEBデザイン(ul)
□□□1.HTML(li)
□□□□□□・HTML1-1(ul)
□□□□□□□□□1.HTML1-1-1(li)
□□□□□□□□□2.HTML1-1-2(li)
□□□□□□・HTML1-2(ul)
□□□□□□□□□1.HTML1-2-1(li)
□□□□□□□□□2.HTML1-2-2(li)
□□□2.CSS(li)
□□□3.Javascript(li)
・イラスト(ul)
該当のソースコード
以下の場合
cssで.testul>li:hover時の背景色を変更すると、
例えば項目１にマウスをあてると
項目1,項目1-1,項目1-2,項目1-3,項目1-4
まで背景色が変わってしまいます。
これを項目1にマウスがあたればそれだけ
項目1-1にマウスがあたればそれだけの背景色を変えるにはどのようなCSSを書けばいいでしょうか？
html
1<section class="menu"> 2<span class="testspan ">項目</span> 3<ul class="testul"> 4 <li class="testli ">項目1 5 <ul class="testul"> 6 <li class="testli pointer " > 7 項目1-1 8 </li> 9 <li class="testli pointer " > 10 項目1-2 11 </li> 12 <li class="testli pointer " > 13 項目1-3 14 </li> 15 <li class="testli pointer " > 16 項目1-4 17 </li> 18 </ul> 19 </li> 20</ul> 21<ul class="testul"> 22 <li class="testli ">項目2 23 <ul class="testul"> 24 <li class="testli pointer " > 25 項目2-1 26 </li> 27 <li class="testli pointer " > 28 項目2-2 29 </li> 30 <li class="testli pointer " > 31 項目2-3 32 </li> 33 <li class="testli pointer " > 34 項目2-4 35 </li> 36 </ul> 37 </li> 38</ul> 39 40<span class="testspan ">項目</span> 41<ul class="testul"> 42 <li class="testli ">項目3 43 <ul class="testul"> 44 <li class="testli pointer " > 45 項目3-1 46 </li> 47 <li class="testli pointer " > 48 項目3-2 49 </li> 50 <li class="testli pointer " > 51 項目3-3 52 </li> 53 <li class="testli pointer " > 54 項目3-4 55 </li> 56 </ul> 57 </li> 58</ul> 59
試したこと
ul ul li:hover {background:#色}
で項目1-1,項目1-2,項目1-3,項目1-4
はそれぞれマウスオーバーで背景色が変わりました。
項目1,項目2,項目3
のみのマウスオーバーがうまくいきません。
例えばliタグ内テキストをspanでくくって
li>span:hover {
background:#色;
}
とすることもできますが
これだとリストマークは置いてきぼりで、単純にテキストの背景色のみ変わってしまいます。
これ以外の方法を知りたいです。
回答2件
0
ベストアンサー
何か違うやり方もある気がしますが・・・
とりあえず下記でどうでしょうか？
html
1 <ul class="testul"> 2 <li class="testli hoge">項目1 // class追加 3 <ul class="testul"> 4 <li class="testli pointer " > 5 項目1-1 6 </li> 7 <li class="testli pointer " > 8 項目1-2 9 </li> 10 <li class="testli pointer " > 11 項目1-3 12 </li> 13 <li class="testli pointer " > 14 項目1-4 15 </li> 16 </ul> 17 </li> 18 </ul> 19
css
1 li:hover {background:#000;} 2 li:not(.hoge) {background: #0ff;} 3 li.pointer:hover {background:#f00;}
修正
htmlのclass追加無しで
cssのみの下記でどうでしょうか？
css
1 li { 2 list-style-position: inside; 3 padding-left: 1em; 4 } 5 li:hover { 6 background:#aaf; 7 } 8 ul ul { 9 background: #fff; 10 padding-left: 1em; 11 margin-left: -1em; 12 } 13 li.pointer:hover { 14 background:#f00; 15 }
投稿2019/01/16 05:58
編集2019/01/16 06:30
総合スコア955
0
だいぶ変更したので一度書き直しました。
HTMLなど結構いじっちゃってますがご了承ください。
html
1<span class="testspan ">項目</span> 2<ul class="testul"> 3 <li class="testli test"> 4 項目1 5 </li> 6</ul> 7<ul class="testul"> 8 <li class="testli pointer " > 9 項目1-1 10 </li> 11 <li class="testli pointer " > 12 項目1-2 13 </li> 14 <li class="testli pointer " > 15 項目1-3 16 </li> 17 <li class="testli pointer " > 18 項目1-4 19 </li> 20</ul>
CSS
1.testul { 2 margin:0px auto; 3} 4 5.test { 6 list-style-position: inside; 7 margin:0px; 8} 9.test:hover { 10 margin:0px; 11 background:blue; 12} 13 14.pointer { 15 margin-left:20px; 16 list-style-type:circle; 17 list-style-position: inside; 18} 19 20.pointer:hover { 21 background:red; 22}
テスト結果↓
項目１のリストを下まで延ばさずに、項目１だけで終わらせました。
中身のリストは小細工で中身に含まれているように見せています。
list-style-position: inside;
リストマーカーの部分まで背景色を変えたいとのことだったので、上記のCSSも追加しました。
こちらを入れると、リストマーカーはリストの内部に含まれていると認識されます。
padding-leftを設定してあげれば、リストマーカーの左部分まで自然に背景色をつけられるかと思います。
**list-style-type:circle; **
小細工で中に含まれていたリストを外に出してしまったので、
リストマーカーが ○ → ● にかわってしまったのを、上記のCSSで修正しています。
色々小細工が入ってしまっていますが、一応これで項目毎に色は変更できるはずです。
何か認識祖語などございましたら言っていただければ修正します。
投稿2019/01/16 04:56
編集2019/01/16 05:58
総合スコア2343
あと、文字の背景色、というよりliをホバーした時のように
リストアイコンごと背景色を変えたいです。可能なのでしょうか・・・
やはり<span>タグで囲む方法しかないですかね・・
そうなると他の項目と見え方の差が気になるところです。
リストマーカーまで背景にできる方法は見つけたのですがいろいろコードに小細工入れてるので少々お待ちください...
ありがとうございます！！！
ありがとうございます。確かにこれだと実現できました！！
しかしすいません
＞項目１のリストを下まで延ばさずに、項目１だけで終わらせました。
とありますが、実際こちらのlistはDB項目をforeachで吐き出しており、
階層もデータにより何階層下に入れ子になるか不明なため、この形を取るとなると
吐き出しロジックの見直しも必要となってしまいます。
できればそのままの入れ子の形で実現したいと考えていました。
しかし、それが難しいとなればこちらの案も考えなくてはならないですね・・・。
とても参考になりました。
やはりリストの形は必須でしたか。なぜこの形で書いているんだろうと疑問に思っていたんですよね。
データの構造上それで実装するしかないとするのであれば、
JSで背景色を持たせて設定したりなど、またさらに複雑な処理をするしかなくなりますね・・・
項目１のところの背景色を変えたい場合は恐らくですが提示したコードのようになってしまいます。
なので項目１を出力するところと、項目1-1～項目1-4を出力する箇所で分けたりなど根本を変更する必要があるかと・・・。
ただ、私の知識不足もあるので、質問を編集しなおすか、一旦ここは締めて新しくDB取得時の背景色設定方法などで回答を呼び掛けると良いかもしれません。
お役にたてず申し訳ないです・・・
いえ！本当に助かりました！いったん掃き出しのロジックの見直し等、考え直してみます。参考にさせていただきます。ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/16 06:04
2019/01/16 06:31
2019/01/16 06:31
2019/01/16 06:34
2019/01/17 03:12