teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問ul li要素の入れ子　マウスオーバー時に背景色を変えたい

編集履歴

回答編集履歴

8

画像追加

2019/01/16 05:58

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -102,6 +102,12 @@
102
102
 
103
103
 
104
104
 
105
+ ### テスト結果↓
106
+
107
+ ![イメージ説明](c5f7c02df4d537027fb124c2e2d4628e.png)
108
+
109
+
110
+
105
111
  項目１のリストを下まで延ばさずに、項目１だけで終わらせました。
106
112
 
107
113
  中身のリストは小細工で中身に含まれているように見せています。

7

修正

2019/01/16 05:58

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -57,8 +57,6 @@
57
57
  .testul {
58
58
 
59
59
  margin:0px auto;
60
-
61
- padding-bottom:0px;
62
60
 
63
61
  }
64
62
 

6

修正

2019/01/16 05:54

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  <span class="testspan ">項目</span>
12
12
 
13
- <ul class="testul testheader">
13
+ <ul class="testul">
14
14
 
15
15
  <li class="testli test">
16
16
 

5

最終追記

2019/01/16 05:51

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -1,142 +1,50 @@
1
+ だいぶ変更したので一度書き直しました。
2
+
1
- 例えばですが、こうやって記述すると、ホバーしたところだけ背景が赤く変わります。
3
+ HTMLなど結構いじっちゃってますがご了承ください。
2
4
 
3
5
 
4
-
5
- ```css
6
-
7
- .pointer:hover {
8
-
9
- background:red;
10
-
11
- }
12
-
13
- ```
14
-
15
-
16
-
17
- ---
18
-
19
- さらに編集
20
6
 
21
7
 
22
8
 
23
9
  ```html
24
10
 
25
- <section class="menu">
11
+ <span class="testspan ">項目</span>
26
12
 
27
- <span class="testspan ">項目</span>
13
+ <ul class="testul testheader">
14
+
15
+ <li class="testli test">
16
+
17
+ 項目1
18
+
19
+ </li>
20
+
21
+ </ul>
28
22
 
29
23
  <ul class="testul">
30
24
 
31
- <li class="testli "><p class="test">項目1</p>
25
+ <li class="testli pointer " >
32
26
 
33
- <ul class="testul">
27
+ 項目1-1
34
28
 
35
- <li class="testli pointer " >
29
+ </li>
36
30
 
37
- 項目1-1
31
+ <li class="testli pointer " >
38
32
 
39
- </li>
33
+ 項目1-2
40
34
 
41
- <li class="testli pointer " >
35
+ </li>
42
36
 
43
- 項目1-2
37
+ <li class="testli pointer " >
44
38
 
45
- </li>
39
+ 項目1-3
46
40
 
47
- <li class="testli pointer " >
41
+ </li>
48
42
 
49
- 項目1-3
43
+ <li class="testli pointer " >
50
44
 
51
- </li>
45
+ 項目1-4
52
46
 
53
- <li class="testli pointer " >
54
-
55
- 項目1-4
56
-
57
- </li>
47
+ </li>
58
-
59
- </ul>
60
-
61
- </li>
62
-
63
- </ul>
64
-
65
- <span class="testspan ">項目</span>
66
-
67
- <ul class="testul">
68
-
69
- <li class="testli pointer2"><p class="test">項目2</p>
70
-
71
- <ul class="testul">
72
-
73
- <li class="testli pointer " >
74
-
75
- 項目2-1
76
-
77
- </li>
78
-
79
- <li class="testli pointer " >
80
-
81
- 項目2-2
82
-
83
- </li>
84
-
85
- <li class="testli pointer " >
86
-
87
- 項目2-3
88
-
89
- </li>
90
-
91
- <li class="testli pointer " >
92
-
93
- 項目2-4
94
-
95
- </li>
96
-
97
- </ul>
98
-
99
- </li>
100
-
101
- </ul>
102
-
103
-
104
-
105
- <span class="testspan ">項目</span>
106
-
107
- <ul class="testul">
108
-
109
- <li class="testli "><p class="test">項目3</p>
110
-
111
- <ul class="testul">
112
-
113
- <li class="testli pointer " >
114
-
115
- 項目3-1
116
-
117
- </li>
118
-
119
- <li class="testli pointer " >
120
-
121
- 項目3-2
122
-
123
- </li>
124
-
125
- <li class="testli pointer " >
126
-
127
- 項目3-3
128
-
129
- </li>
130
-
131
- <li class="testli pointer " >
132
-
133
- 項目3-4
134
-
135
- </li>
136
-
137
- </ul>
138
-
139
- </li>
140
48
 
141
49
  </ul>
142
50
 
@@ -144,9 +52,21 @@
144
52
 
145
53
 
146
54
 
147
- ```css
55
+ ```CSS
56
+
57
+ .testul {
58
+
59
+ margin:0px auto;
60
+
61
+ padding-bottom:0px;
62
+
63
+ }
64
+
65
+
148
66
 
149
67
  .test {
68
+
69
+ list-style-position: inside;
150
70
 
151
71
  margin:0px;
152
72
 
@@ -162,6 +82,18 @@
162
82
 
163
83
 
164
84
 
85
+ .pointer {
86
+
87
+ margin-left:20px;
88
+
89
+ list-style-type:circle;
90
+
91
+ list-style-position: inside;
92
+
93
+ }
94
+
95
+
96
+
165
97
  .pointer:hover {
166
98
 
167
99
  background:red;
@@ -172,18 +104,38 @@
172
104
 
173
105
 
174
106
 
175
- リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
107
+ 項目１のリストを下まで延ばさずに、項目１だけで終わらせました。
176
108
 
177
- もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。
109
+ 中身のリストは小細工で中身に含まれているように見せています。
178
110
 
179
111
 
180
112
 
181
- リストマーカーの背景色も変えたいとのことでしたが、
182
-
183
- 項目１などのリストの大枠は項目1-4の下まで続いてしまっているので、背景色を変更しようとすると
184
-
185
- 項目1、項目1-1～項目1-4まで変わってしまいます。
113
+ **list-style-position: inside;**
186
114
 
187
115
 
188
116
 
117
+ リストマーカーの部分まで背景色を変えたいとのことだったので、上記のCSSも追加しました。
118
+
119
+ こちらを入れると、リストマーカーはリストの内部に含まれていると認識されます。
120
+
121
+ padding-leftを設定してあげれば、リストマーカーの左部分まで自然に背景色をつけられるかと思います。
122
+
123
+
124
+
125
+
126
+
127
+ **list-style-type:circle; **
128
+
129
+
130
+
131
+ 小細工で中に含まれていたリストを外に出してしまったので、
132
+
133
+ リストマーカーが ○ → ● にかわってしまったのを、上記のCSSで修正しています。
134
+
135
+
136
+
189
- どうにかできないか調べてはみますが、このままでは難しいような気がします。
137
+ 色々小細工が入ってしまっていますが、一応これで項目毎に色は変更できるはずです。
138
+
139
+
140
+
141
+ 何か認識祖語などございましたら言っていただければ修正します。

4

追記

2019/01/16 05:50

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -175,3 +175,15 @@
175
175
  リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
176
176
 
177
177
  もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。
178
+
179
+
180
+
181
+ リストマーカーの背景色も変えたいとのことでしたが、
182
+
183
+ 項目１などのリストの大枠は項目1-4の下まで続いてしまっているので、背景色を変更しようとすると
184
+
185
+ 項目1、項目1-1～項目1-4まで変わってしまいます。
186
+
187
+
188
+
189
+ どうにかできないか調べてはみますが、このままでは難しいような気がします。

3

追記

2019/01/16 05:28

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -174,4 +174,4 @@
174
174
 
175
175
  リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
176
176
 
177
- もしその文字のところだけ背景色を変えたいのであれば、<p>タグで囲んでしまうのが簡単です。
177
+ もしその文字のところだけ背景色を変えたいのであれば、<p>タグや<span>タグで囲んでしまうのが簡単です。

2

追記

2019/01/16 05:24

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -14,8 +14,164 @@
14
14
 
15
15
 
16
16
 
17
- 低評価ついちゃったので追加質問ですが
17
+ ---
18
18
 
19
- 項目１をマウスホバーしたときは、項目１という文字の背景色のみ変えたいのか、
19
+ さらに編集
20
20
 
21
+
22
+
23
+ ```html
24
+
25
+ <section class="menu">
26
+
27
+ <span class="testspan ">項目</span>
28
+
29
+ <ul class="testul">
30
+
31
+ <li class="testli "><p class="test">項目1</p>
32
+
33
+ <ul class="testul">
34
+
35
+ <li class="testli pointer " >
36
+
37
+ 項目1-1
38
+
39
+ </li>
40
+
41
+ <li class="testli pointer " >
42
+
43
+ 項目1-2
44
+
45
+ </li>
46
+
47
+ <li class="testli pointer " >
48
+
49
+ 項目1-3
50
+
51
+ </li>
52
+
53
+ <li class="testli pointer " >
54
+
55
+ 項目1-4
56
+
57
+ </li>
58
+
59
+ </ul>
60
+
61
+ </li>
62
+
63
+ </ul>
64
+
65
+ <span class="testspan ">項目</span>
66
+
67
+ <ul class="testul">
68
+
69
+ <li class="testli pointer2"><p class="test">項目2</p>
70
+
71
+ <ul class="testul">
72
+
73
+ <li class="testli pointer " >
74
+
75
+ 項目2-1
76
+
77
+ </li>
78
+
79
+ <li class="testli pointer " >
80
+
81
+ 項目2-2
82
+
83
+ </li>
84
+
85
+ <li class="testli pointer " >
86
+
87
+ 項目2-3
88
+
89
+ </li>
90
+
91
+ <li class="testli pointer " >
92
+
93
+ 項目2-4
94
+
95
+ </li>
96
+
97
+ </ul>
98
+
99
+ </li>
100
+
101
+ </ul>
102
+
103
+
104
+
105
+ <span class="testspan ">項目</span>
106
+
107
+ <ul class="testul">
108
+
109
+ <li class="testli "><p class="test">項目3</p>
110
+
111
+ <ul class="testul">
112
+
113
+ <li class="testli pointer " >
114
+
115
+ 項目3-1
116
+
117
+ </li>
118
+
119
+ <li class="testli pointer " >
120
+
121
+ 項目3-2
122
+
123
+ </li>
124
+
125
+ <li class="testli pointer " >
126
+
127
+ 項目3-3
128
+
129
+ </li>
130
+
131
+ <li class="testli pointer " >
132
+
133
+ 項目3-4
134
+
135
+ </li>
136
+
137
+ </ul>
138
+
139
+ </li>
140
+
141
+ </ul>
142
+
143
+ ```
144
+
145
+
146
+
147
+ ```css
148
+
149
+ .test {
150
+
151
+ margin:0px;
152
+
153
+ }
154
+
155
+ .test:hover {
156
+
157
+ margin:0px;
158
+
159
+ background:blue;
160
+
161
+ }
162
+
163
+
164
+
165
+ .pointer:hover {
166
+
167
+ background:red;
168
+
169
+ }
170
+
171
+ ```
172
+
173
+
174
+
21
- 中に含まれているリスト達も同じ背景色に統一したいのかどちらでしょう。
175
+ リストに背景色をつけると、そのリストに含まれているものにまで適用されてしまうので、
176
+
177
+ もしその文字のところだけ背景色を変えたいのであれば、<p>タグで囲んでしまうのが簡単です。

1

質問追記

2019/01/16 05:20

投稿

azuapricot
azuapricot

スコア2343

test CHANGED
@@ -11,3 +11,11 @@
11
11
  }
12
12
 
13
13
  ```
14
+
15
+
16
+
17
+ 低評価ついちゃったので追加質問ですが
18
+
19
+ 項目１をマウスホバーしたときは、項目１という文字の背景色のみ変えたいのか、
20
+
21
+ 中に含まれているリスト達も同じ背景色に統一したいのかどちらでしょう。