teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問マウスオーバーが上手く作動しません

編集履歴

質問編集履歴

3

2019/02/19 00:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,305 +1 @@
1
1
  マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。
2
-
3
-
4
-
5
-
6
-
7
- ```
8
-
9
- <html>
10
-
11
-
12
-
13
- <head>
14
-
15
- <title> Official Website </title>
16
-
17
-
18
-
19
- <style>
20
-
21
-
22
-
23
-  #apDiv1{
24
-
25
-          position: fixed;
26
-
27
-          width: 100%;
28
-
29
-          height: 75;
30
-
31
-          z-index: 1000;
32
-
33
-          top: 0;
34
-
35
-          left: 0;
36
-
37
-  }
38
-
39
-
40
-
41
-  #apDiv2{
42
-
43
-          position: absolute;
44
-
45
-          width: 100%;
46
-
47
-          height: 75;
48
-
49
-          z-index: 80;
50
-
51
-          top: 650;
52
-
53
-          left: 230;
54
-
55
-  }
56
-
57
-
58
-
59
-  #apDiv9 {
60
-
61
-          position: absolute;
62
-
63
-          width: 1000;
64
-
65
-          height: 75;
66
-
67
-          z-index:120;
68
-
69
-          top: 1214;
70
-
71
-          left: 0;
72
-
73
-  }
74
-
75
-
76
-
77
-  body{
78
-
79
-          background-image:url(image/0.jpg);
80
-
81
-          background-repeat: no-repeat;
82
-
83
-  }
84
-
85
-
86
-
87
- .bx-wrapper{position: absolute;left:140;top:150;
88
-
89
- width:900;height:auto;z-index:100}
90
-
91
-  </style>
92
-
93
-
94
-
95
-
96
-
97
-  <script type="text/javascript"
98
-
99
- src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
100
-
101
-  <script src="jquery.bxslider.min.js"></script>
102
-
103
-  <link href="jquery.bxslider.css" rel="stylesheet" />
104
-
105
-  <script type="text/javascript">
106
-
107
-  $ (document).ready(function(){
108
-
109
-  $ ('.slider').bxSlider({
110
-
111
-    auto: true,
112
-
113
-
114
-
115
-  pause:6000,
116
-
117
-
118
-
119
-  speed:1000,
120
-
121
-
122
-
123
-  minSlides: 1,
124
-
125
-
126
-
127
-  maxSlides: 1,
128
-
129
-
130
-
131
-  slideWidth:500,
132
-
133
-
134
-
135
-  slideMargin: 10,
136
-
137
-
138
-
139
-  pager: true,
140
-
141
-
142
-
143
-  controls:true,
144
-
145
-
146
-
147
-  });
148
-
149
-
150
-
151
-      });
152
-
153
-  </script>
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-  <meta http-equiv="Content-Type" content="text/html; charset=unicode">
162
-
163
-
164
-
165
-  </head>
166
-
167
-
168
-
169
-  <body>
170
-
171
-
172
-
173
-  <style>
174
-
175
-  a { text-decoration: none; }
176
-
177
-  </style>
178
-
179
-  <div id = " apDiv1" >
180
-
181
-
182
-
183
-
184
-
185
-  <table  width="100%"  border="0" cellspacing="0" cellpadding="0"
186
-
187
- align="center" bgcolor="#b4c0e0" >
188
-
189
-      <tr>
190
-
191
-          <td><a href="https://www.instagram.com/">
192
-
193
- <img src="image/instagram.gif"
194
-
195
- onMouseOver="this.src='image/instagram2.gif'"
196
-
197
- onMouseOut="this.src='image/instagram.gif'">
198
-
199
- </a></td>
200
-
201
-          <td><img src = "image/square.gif"></td>
202
-
203
-          <td><a href="http://www.nikoand.jp/" >
204
-
205
- <img src="image/favorite.gif"
206
-
207
- onMouseOver="this.src='image/favorite2.gif'"
208
-
209
- onMouseOut="this.src='image/favorites.gif'">
210
-
211
- </a></td>
212
-
213
-          <td><img src="image/square.gif"></td>
214
-
215
-          <td><a href="2d02ishibashi.pdf">
216
-
217
- <img src="image/mymaga.gif"
218
-
219
- onMouseOver="this.src='image/mymaga2.gif'"
220
-
221
- onMouseOut="this.src='image/mymaga.gif'">
222
-
223
- </a></td>
224
-
225
-          <td><img src="image/square.gif"></td>
226
-
227
-          <td><a href="mycm.mp4">
228
-
229
- <img src="image/mycm.gif" onMouseOver="this.src='image/mycm2.gif'"
230
-
231
- onMouseOut="this.src='image/mycm.gif'">
232
-
233
- </a></td>
234
-
235
-      </tr>
236
-
237
-  </table>
238
-
239
-
240
-
241
-  </div>
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
- <div id="apDiv2">
252
-
253
-          <ul class="slider">
254
-
255
-                                            <li><img src="image/1.jpg"/></li>
256
-
257
-                                            <li><img src="image/2.jpg"/></li>
258
-
259
-                                            <li><img src="image/3.jpg"/></li>
260
-
261
-                                            <li><img src="image/4.jpg"/></li>
262
-
263
-                                            <li><img src="image/5.jpg"/></li>
264
-
265
-                                            <li><img src="image/6.jpg"/></li>
266
-
267
-                                            <li><img src="image/7.jpg"/></li>
268
-
269
-                                            <li><img src="image/8.jpg"/></li>
270
-
271
-                                            <li><img src="image/9.jpg"/></li>
272
-
273
-                                            <li><img src="image/10.jpg"/></li>
274
-
275
-                                </ul>
276
-
277
-  </div>
278
-
279
-
280
-
281
- <div id="apDiv9">
282
-
283
-  <p id="pagetop"><a href="#top"><img src="image/pagetop.png"></a></p>
284
-
285
-
286
-
287
-
288
-
289
- </div>
290
-
291
-
292
-
293
-
294
-
295
- <style="overflow-x: hidden;
296
-
297
- ">
298
-
299
-
300
-
301
-  </body>
302
-
303
-  </html>
304
-
305
- ```

2

2019/02/19 00:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -292,7 +292,7 @@
292
292
 
293
293
 
294
294
 
295
- <body style="overflow-x: hidden;
295
+ <style="overflow-x: hidden;
296
296
 
297
297
  ">
298
298
 

1

2019/02/19 00:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <head>
14
14
 
15
- <title> Website </title>
15
+ <title> Official Website </title>
16
16
 
17
17
 
18
18
 
@@ -20,53 +20,175 @@
20
20
 
21
21
 
22
22
 
23
- #apDiv1{
24
-
25
- position: fixed;
26
-
27
- width: 100%;
28
-
29
- height: 75;
30
-
31
- z-index: 1000;
32
-
33
- top: 0;
34
-
35
- left: 0;
36
-
37
- }
38
-
39
-
40
-
41
-
42
-
43
- </head>
44
-
45
-
46
-
47
- <body>
48
-
49
-
50
-
51
- <style>
52
-
53
- a { text-decoration: none; }
54
-
55
- </style>
56
-
57
- <div id = " apDiv1" >
58
-
59
-
60
-
61
-
62
-
63
- <table width="100%" border="0" cellspacing="0" cellpadding="0"
23
+  #apDiv1{
24
+
25
+          position: fixed;
26
+
27
+          width: 100%;
28
+
29
+          height: 75;
30
+
31
+          z-index: 1000;
32
+
33
+          top: 0;
34
+
35
+          left: 0;
36
+
37
+  }
38
+
39
+
40
+
41
+  #apDiv2{
42
+
43
+          position: absolute;
44
+
45
+          width: 100%;
46
+
47
+          height: 75;
48
+
49
+          z-index: 80;
50
+
51
+          top: 650;
52
+
53
+          left: 230;
54
+
55
+  }
56
+
57
+
58
+
59
+  #apDiv9 {
60
+
61
+          position: absolute;
62
+
63
+          width: 1000;
64
+
65
+          height: 75;
66
+
67
+          z-index:120;
68
+
69
+          top: 1214;
70
+
71
+          left: 0;
72
+
73
+  }
74
+
75
+
76
+
77
+  body{
78
+
79
+          background-image:url(image/0.jpg);
80
+
81
+          background-repeat: no-repeat;
82
+
83
+  }
84
+
85
+
86
+
87
+ .bx-wrapper{position: absolute;left:140;top:150;
88
+
89
+ width:900;height:auto;z-index:100}
90
+
91
+  </style>
92
+
93
+
94
+
95
+
96
+
97
+  <script type="text/javascript"
98
+
99
+ src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
100
+
101
+  <script src="jquery.bxslider.min.js"></script>
102
+
103
+  <link href="jquery.bxslider.css" rel="stylesheet" />
104
+
105
+  <script type="text/javascript">
106
+
107
+  $ (document).ready(function(){
108
+
109
+  $ ('.slider').bxSlider({
110
+
111
+    auto: true,
112
+
113
+
114
+
115
+  pause:6000,
116
+
117
+
118
+
119
+  speed:1000,
120
+
121
+
122
+
123
+  minSlides: 1,
124
+
125
+
126
+
127
+  maxSlides: 1,
128
+
129
+
130
+
131
+  slideWidth:500,
132
+
133
+
134
+
135
+  slideMargin: 10,
136
+
137
+
138
+
139
+  pager: true,
140
+
141
+
142
+
143
+  controls:true,
144
+
145
+
146
+
147
+  });
148
+
149
+
150
+
151
+      });
152
+
153
+  </script>
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+  <meta http-equiv="Content-Type" content="text/html; charset=unicode">
162
+
163
+
164
+
165
+  </head>
166
+
167
+
168
+
169
+  <body>
170
+
171
+
172
+
173
+  <style>
174
+
175
+  a { text-decoration: none; }
176
+
177
+  </style>
178
+
179
+  <div id = " apDiv1" >
180
+
181
+
182
+
183
+
184
+
185
+  <table  width="100%"  border="0" cellspacing="0" cellpadding="0"
64
186
 
65
187
  align="center" bgcolor="#b4c0e0" >
66
188
 
67
- <tr>
189
+      <tr>
68
-
190
+
69
- <td><a href="https://www.instagram.com/">
191
+          <td><a href="https://www.instagram.com/">
70
192
 
71
193
  <img src="image/instagram.gif"
72
194
 
@@ -76,9 +198,9 @@
76
198
 
77
199
  </a></td>
78
200
 
79
- <td><img src = "image/square.gif"></td>
201
+          <td><img src = "image/square.gif"></td>
80
-
202
+
81
- <td><a href="http://www.nikoand.jp/" >
203
+          <td><a href="http://www.nikoand.jp/" >
82
204
 
83
205
  <img src="image/favorite.gif"
84
206
 
@@ -88,9 +210,9 @@
88
210
 
89
211
  </a></td>
90
212
 
91
- <td><img src="image/square.gif"></td>
213
+          <td><img src="image/square.gif"></td>
92
-
214
+
93
- <td><a href="magazine.pdf">
215
+          <td><a href="2d02ishibashi.pdf">
94
216
 
95
217
  <img src="image/mymaga.gif"
96
218
 
@@ -100,9 +222,9 @@
100
222
 
101
223
  </a></td>
102
224
 
103
- <td><img src="image/square.gif"></td>
225
+          <td><img src="image/square.gif"></td>
104
-
226
+
105
- <td><a href="mycm.mp4">
227
+          <td><a href="mycm.mp4">
106
228
 
107
229
  <img src="image/mycm.gif" onMouseOver="this.src='image/mycm2.gif'"
108
230
 
@@ -110,23 +232,61 @@
110
232
 
111
233
  </a></td>
112
234
 
113
- </tr>
235
+      </tr>
114
-
236
+
115
- </table>
237
+  </table>
116
-
117
-
118
-
238
+
239
+
240
+
119
- </div>
241
+  </div>
242
+
243
+
244
+
245
+
246
+
247
+
248
+
249
+
250
+
120
-
251
+ <div id="apDiv2">
252
+
121
-
253
+          <ul class="slider">
254
+
122
-
255
+                                            <li><img src="image/1.jpg"/></li>
256
+
123
-
257
+                                            <li><img src="image/2.jpg"/></li>
258
+
124
-
259
+                                            <li><img src="image/3.jpg"/></li>
260
+
125
-
261
+                                            <li><img src="image/4.jpg"/></li>
262
+
126
-
263
+                                            <li><img src="image/5.jpg"/></li>
264
+
127
-
265
+                                            <li><img src="image/6.jpg"/></li>
266
+
128
-
267
+                                            <li><img src="image/7.jpg"/></li>
268
+
129
-
269
+                                            <li><img src="image/8.jpg"/></li>
270
+
271
+                                            <li><img src="image/9.jpg"/></li>
272
+
273
+                                            <li><img src="image/10.jpg"/></li>
274
+
275
+                                </ul>
276
+
277
+  </div>
278
+
279
+
280
+
281
+ <div id="apDiv9">
282
+
283
+  <p id="pagetop"><a href="#top"><img src="image/pagetop.png"></a></p>
284
+
285
+
286
+
287
+
288
+
289
+ </div>
130
290
 
131
291
 
132
292
 
@@ -138,8 +298,8 @@
138
298
 
139
299
 
140
300
 
141
- </body>
301
+  </body>
142
-
302
+
143
- </html>
303
+  </html>
144
304
 
145
305
  ```