質問編集履歴

3

ソースに誤りがあった為再編集いたしました。

2019/03/01 01:50

投稿

canazawa__
canazawa__

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,16 @@
1
+ タブをマウスオーバーで切り替えるナビゲーションを作成したいのですが、
2
+
3
+ タブの中身( <div class="hide"></div>の中)にaタグを追加し、
4
+
5
+ そのaタグをマウスオーバーするとタブの中身(<div class="hide"></div>)がdisplay:noneになってしまい非表示になってしまいます。
6
+
7
+ aタグをマウスオーバーしても表示されるようにしたいのですが可能でしょうか?
8
+
9
+ よろしくお願いいたします。
10
+
11
+
12
+
1
- <html>
13
+ ```<html>
2
14
 
3
15
  <head>
4
16
 
@@ -139,3 +151,5 @@
139
151
  </body>
140
152
 
141
153
  </html>
154
+
155
+ ```

2

ソースに誤りがあった為編集いたしました。

2019/03/01 01:50

投稿

canazawa__
canazawa__

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,19 +1,3 @@
1
- マウスオーバーで表示を切り変えるタブメニューを作成したいのですが、
2
-
3
- 下記のタブの中身(<div class="hide"></div>の中)にaタグのリンクを付け、
4
-
5
- そのリンクをマウスオーバーするとタブの中身がdisplay:noneになってしまい表示されません。
6
-
7
- 回避する方法はありますでしょうか?
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
- ```<!doctype html>
16
-
17
1
  <html>
18
2
 
19
3
  <head>
@@ -26,7 +10,7 @@
26
10
 
27
11
  <script>
28
12
 
29
- $(function() {
13
+ $(function() {
30
14
 
31
15
  $('.tab li').hover(function() {
32
16
 
@@ -44,79 +28,79 @@
44
28
 
45
29
 
46
30
 
47
- $('.hide').mouseout(function() {
31
+ $('.hide').mouseout(function() {
48
32
 
49
- this.style.display = "block";
33
+ this.style.display = "none";
50
34
 
51
-
35
+
52
36
 
53
37
  });
54
38
 
55
39
 
56
40
 
57
-
58
41
 
59
-
60
42
 
61
- });
62
43
 
63
-
64
44
 
45
+ });
46
+
47
+
48
+
65
- </script>
49
+ </script>
66
50
 
67
51
  <style>
68
52
 
69
53
  .tabmenu {
70
54
 
71
- width: 60%;
55
+ width: 60%;
72
56
 
73
57
  }
74
58
 
75
59
  .tab {
76
60
 
77
- overflow: hidden;
61
+ overflow: hidden;
78
62
 
79
- margin: 0;
63
+ margin: 0;
80
64
 
81
- padding: 0;
65
+ padding: 0;
82
66
 
83
- list-style: none;
67
+ list-style: none;
84
68
 
85
69
  }
86
70
 
87
71
  .tab li {
88
72
 
89
- cursor: pointer;
73
+ cursor: pointer;
90
74
 
91
- display: inline-block;
75
+ display: inline-block;
92
76
 
93
- width: auto;
77
+ width: auto;
94
78
 
95
- padding: .3em;
79
+ padding: .3em;
96
80
 
97
- font-weight: bold;
81
+ font-weight: bold;
98
82
 
99
83
  }
100
84
 
101
85
  .tab li.select {
102
86
 
103
- border-bottom: solid 4px #fdbb30;
87
+ border-bottom: solid 4px #fdbb30;
104
88
 
105
89
  }
106
90
 
107
91
  .content div {
108
92
 
109
- height: auto;
93
+ height: auto;
110
94
 
111
- padding: .6em;
95
+ padding: .6em;
112
96
 
113
- border: solid 1px #ccc;
97
+ border: solid 1px #ccc;
114
98
 
115
99
  }
116
100
 
117
101
  .hide {
118
102
 
119
- display: none;
103
+ display: none;
120
104
 
121
105
  }
122
106
 
@@ -155,5 +139,3 @@
155
139
  </body>
156
140
 
157
141
  </html>
158
-
159
- ```

1

失礼いたしました。<code>の中に記載いたしました。よろしくお願いいたします。

2019/03/01 01:46

投稿

canazawa__
canazawa__

スコア13

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- <!doctype html>
15
+ ```<!doctype html>
16
16
 
17
17
  <html>
18
18
 
@@ -155,3 +155,5 @@
155
155
  </body>
156
156
 
157
157
  </html>
158
+
159
+ ```