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

編集履歴

質問編集履歴

3

2019/02/19 00:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,153 +1,1 @@
1
- マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。
1
+ マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。
2
-
3
-
4
- ```
5
- <html>
6
-
7
- <head>
8
- <title> Official Website </title>
9
-
10
- <style>
11
-
12
-  #apDiv1{
13
-          position: fixed;
14
-          width: 100%;
15
-          height: 75;
16
-          z-index: 1000;
17
-          top: 0;
18
-          left: 0;
19
-  }
20
-
21
-  #apDiv2{
22
-          position: absolute;
23
-          width: 100%;
24
-          height: 75;
25
-          z-index: 80;
26
-          top: 650;
27
-          left: 230;
28
-  }
29
-
30
-  #apDiv9 {
31
-          position: absolute;
32
-          width: 1000;
33
-          height: 75;
34
-          z-index:120;
35
-          top: 1214;
36
-          left: 0;
37
-  }
38
-
39
-  body{
40
-          background-image:url(image/0.jpg);
41
-          background-repeat: no-repeat;
42
-  }
43
-
44
- .bx-wrapper{position: absolute;left:140;top:150;
45
- width:900;height:auto;z-index:100}
46
-  </style>
47
-
48
-
49
-  <script type="text/javascript"
50
- src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
51
-  <script src="jquery.bxslider.min.js"></script>
52
-  <link href="jquery.bxslider.css" rel="stylesheet" />
53
-  <script type="text/javascript">
54
-  $ (document).ready(function(){
55
-  $ ('.slider').bxSlider({
56
-    auto: true,
57
-
58
-  pause:6000,
59
-
60
-  speed:1000,
61
-
62
-  minSlides: 1,
63
-
64
-  maxSlides: 1,
65
-
66
-  slideWidth:500,
67
-
68
-  slideMargin: 10,
69
-
70
-  pager: true,
71
-
72
-  controls:true,
73
-
74
-  });
75
-
76
-      });
77
-  </script>
78
-
79
-
80
-
81
-  <meta http-equiv="Content-Type" content="text/html; charset=unicode">
82
-
83
-  </head>
84
-
85
-  <body>
86
-
87
-  <style>
88
-  a { text-decoration: none; }
89
-  </style>
90
-  <div id = " apDiv1" >
91
-
92
-
93
-  <table  width="100%"  border="0" cellspacing="0" cellpadding="0"
94
- align="center" bgcolor="#b4c0e0" >
95
-      <tr>
96
-          <td><a href="https://www.instagram.com/">
97
- <img src="image/instagram.gif"
98
- onMouseOver="this.src='image/instagram2.gif'"
99
- onMouseOut="this.src='image/instagram.gif'">
100
- </a></td>
101
-          <td><img src = "image/square.gif"></td>
102
-          <td><a href="http://www.nikoand.jp/" >
103
- <img src="image/favorite.gif"
104
- onMouseOver="this.src='image/favorite2.gif'"
105
- onMouseOut="this.src='image/favorites.gif'">
106
- </a></td>
107
-          <td><img src="image/square.gif"></td>
108
-          <td><a href="2d02ishibashi.pdf">
109
- <img src="image/mymaga.gif"
110
- onMouseOver="this.src='image/mymaga2.gif'"
111
- onMouseOut="this.src='image/mymaga.gif'">
112
- </a></td>
113
-          <td><img src="image/square.gif"></td>
114
-          <td><a href="mycm.mp4">
115
- <img src="image/mycm.gif" onMouseOver="this.src='image/mycm2.gif'"
116
- onMouseOut="this.src='image/mycm.gif'">
117
- </a></td>
118
-      </tr>
119
-  </table>
120
-
121
-  </div>
122
-
123
-
124
-
125
-
126
- <div id="apDiv2">
127
-          <ul class="slider">
128
-                                            <li><img src="image/1.jpg"/></li>
129
-                                            <li><img src="image/2.jpg"/></li>
130
-                                            <li><img src="image/3.jpg"/></li>
131
-                                            <li><img src="image/4.jpg"/></li>
132
-                                            <li><img src="image/5.jpg"/></li>
133
-                                            <li><img src="image/6.jpg"/></li>
134
-                                            <li><img src="image/7.jpg"/></li>
135
-                                            <li><img src="image/8.jpg"/></li>
136
-                                            <li><img src="image/9.jpg"/></li>
137
-                                            <li><img src="image/10.jpg"/></li>
138
-                                </ul>
139
-  </div>
140
-
141
- <div id="apDiv9">
142
-  <p id="pagetop"><a href="#top"><img src="image/pagetop.png"></a></p>
143
-
144
-
145
- </div>
146
-
147
-
148
- <style="overflow-x: hidden;
149
- ">
150
-
151
-  </body>
152
-  </html>
153
- ```

2

2019/02/19 00:26

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -145,7 +145,7 @@
145
145
  </div>
146
146
 
147
147
 
148
- <body style="overflow-x: hidden;
148
+ <style="overflow-x: hidden;
149
149
  ">
150
150
 
151
151
   </body>

1

2019/02/19 00:25

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,69 +5,149 @@
5
5
  <html>
6
6
 
7
7
  <head>
8
- <title> Website </title>
8
+ <title> Official Website </title>
9
9
 
10
10
  <style>
11
11
 
12
- #apDiv1{
12
+  #apDiv1{
13
- position: fixed;
13
+          position: fixed;
14
- width: 100%;
14
+          width: 100%;
15
- height: 75;
15
+          height: 75;
16
- z-index: 1000;
16
+          z-index: 1000;
17
- top: 0;
17
+          top: 0;
18
- left: 0;
18
+          left: 0;
19
- }
19
+  }
20
20
 
21
+  #apDiv2{
22
+          position: absolute;
23
+          width: 100%;
24
+          height: 75;
25
+          z-index: 80;
26
+          top: 650;
27
+          left: 230;
28
+  }
21
29
 
30
+  #apDiv9 {
22
- </head>
31
+          position: absolute;
32
+          width: 1000;
33
+          height: 75;
34
+          z-index:120;
35
+          top: 1214;
36
+          left: 0;
37
+  }
23
38
 
24
- <body>
39
+  body{
40
+          background-image:url(image/0.jpg);
41
+          background-repeat: no-repeat;
42
+  }
25
43
 
26
- <style>
44
+ .bx-wrapper{position: absolute;left:140;top:150;
27
- a { text-decoration: none; }
45
+ width:900;height:auto;z-index:100}
28
- </style>
46
+  </style>
29
- <div id = " apDiv1" >
30
47
 
31
48
 
49
+  <script type="text/javascript"
50
+ src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
51
+  <script src="jquery.bxslider.min.js"></script>
52
+  <link href="jquery.bxslider.css" rel="stylesheet" />
53
+  <script type="text/javascript">
54
+  $ (document).ready(function(){
55
+  $ ('.slider').bxSlider({
56
+    auto: true,
57
+
58
+  pause:6000,
59
+
60
+  speed:1000,
61
+
62
+  minSlides: 1,
63
+
64
+  maxSlides: 1,
65
+
66
+  slideWidth:500,
67
+
68
+  slideMargin: 10,
69
+
70
+  pager: true,
71
+
72
+  controls:true,
73
+
74
+  });
75
+
76
+      });
77
+  </script>
78
+
79
+
80
+
81
+  <meta http-equiv="Content-Type" content="text/html; charset=unicode">
82
+
83
+  </head>
84
+
85
+  <body>
86
+
87
+  <style>
88
+  a { text-decoration: none; }
89
+  </style>
90
+  <div id = " apDiv1" >
91
+
92
+
32
- <table width="100%" border="0" cellspacing="0" cellpadding="0"
93
+  <table  width="100%"  border="0" cellspacing="0" cellpadding="0"
33
94
  align="center" bgcolor="#b4c0e0" >
34
- <tr>
95
+      <tr>
35
- <td><a href="https://www.instagram.com/">
96
+          <td><a href="https://www.instagram.com/">
36
97
  <img src="image/instagram.gif"
37
98
  onMouseOver="this.src='image/instagram2.gif'"
38
99
  onMouseOut="this.src='image/instagram.gif'">
39
100
  </a></td>
40
- <td><img src = "image/square.gif"></td>
101
+          <td><img src = "image/square.gif"></td>
41
- <td><a href="http://www.nikoand.jp/" >
102
+          <td><a href="http://www.nikoand.jp/" >
42
103
  <img src="image/favorite.gif"
43
104
  onMouseOver="this.src='image/favorite2.gif'"
44
105
  onMouseOut="this.src='image/favorites.gif'">
45
106
  </a></td>
46
- <td><img src="image/square.gif"></td>
107
+          <td><img src="image/square.gif"></td>
47
- <td><a href="magazine.pdf">
108
+          <td><a href="2d02ishibashi.pdf">
48
109
  <img src="image/mymaga.gif"
49
110
  onMouseOver="this.src='image/mymaga2.gif'"
50
111
  onMouseOut="this.src='image/mymaga.gif'">
51
112
  </a></td>
52
- <td><img src="image/square.gif"></td>
113
+          <td><img src="image/square.gif"></td>
53
- <td><a href="mycm.mp4">
114
+          <td><a href="mycm.mp4">
54
115
  <img src="image/mycm.gif" onMouseOver="this.src='image/mycm2.gif'"
55
116
  onMouseOut="this.src='image/mycm.gif'">
56
117
  </a></td>
57
- </tr>
118
+      </tr>
58
- </table>
119
+  </table>
59
120
 
60
- </div>
121
+  </div>
61
122
 
62
123
 
63
124
 
64
125
 
126
+ <div id="apDiv2">
127
+          <ul class="slider">
128
+                                            <li><img src="image/1.jpg"/></li>
129
+                                            <li><img src="image/2.jpg"/></li>
130
+                                            <li><img src="image/3.jpg"/></li>
131
+                                            <li><img src="image/4.jpg"/></li>
132
+                                            <li><img src="image/5.jpg"/></li>
133
+                                            <li><img src="image/6.jpg"/></li>
134
+                                            <li><img src="image/7.jpg"/></li>
135
+                                            <li><img src="image/8.jpg"/></li>
136
+                                            <li><img src="image/9.jpg"/></li>
137
+                                            <li><img src="image/10.jpg"/></li>
138
+                                </ul>
139
+  </div>
65
140
 
141
+ <div id="apDiv9">
142
+  <p id="pagetop"><a href="#top"><img src="image/pagetop.png"></a></p>
66
143
 
67
144
 
145
+ </div>
146
+
147
+
68
148
  <body style="overflow-x: hidden;
69
149
  ">
70
150
 
71
- </body>
151
+  </body>
72
- </html>
152
+  </html>
73
153
  ```