質問編集履歴

1

テンプレートを使い書き直しました。どうぞ、よろしくお願いいたします。

2019/05/30 08:15

投稿

fine2101
fine2101

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  はじめまして、お世話になります。
2
2
 
3
- Bootstrap4.2.1を使用しております。
3
+ Bootstrap4.3.1を使用しております。
4
4
 
5
5
  ナビゲーションバーのリスト部分にpng画像を使用しhoverさせたとき微妙にhover画像が左へズレて表示されてしまいますのでcssで、
6
6
 
@@ -33,3 +33,165 @@
33
33
 
34
34
 
35
35
  すみませんが、どうぞ、よろしくお願いいたします。
36
+
37
+ ```html
38
+
39
+ <li class="nav-item img-box"><a href="index.html" class="nav-link"><img src="images/homelogo.png" alt="HOME"></a><div class="relative"><img src="images/homelogoh.png" alt="HOME" class="active"></div>
40
+
41
+ コード
42
+
43
+ ```css
44
+
45
+ コード
46
+
47
+ ```
48
+
49
+
50
+
51
+ .img-box {
52
+
53
+ position: relative;
54
+
55
+ }
56
+
57
+ .img-box .active {
58
+
59
+ position: absolute;
60
+
61
+ left: 0;
62
+
63
+ top: 0;
64
+
65
+ opacity: 0;
66
+
67
+ transition: 0.5s; // ゆっくり
68
+
69
+ }
70
+
71
+ .img-box:hover .active {
72
+
73
+ opacity: 1;
74
+
75
+ }
76
+
77
+
78
+
79
+ .relative {
80
+
81
+ position: relative;
82
+
83
+ bottom: 33px;
84
+
85
+ right: -8px;
86
+
87
+ }
88
+
89
+ .absolute {
90
+
91
+ position: absolute;
92
+
93
+ right: 30px;
94
+
95
+ bottom: 30px;
96
+
97
+ }
98
+
99
+ コード
100
+
101
+
102
+
103
+ ### 前提・実現したいこと
104
+
105
+ Bootstrap4のnavバーのリストをロゴ画像にし、かつhoverさせたい。
106
+
107
+
108
+
109
+
110
+
111
+ ### 発生している問題・エラーメッセージ
112
+
113
+ エラーメッセージはありませんが、元のロゴ画像とhoverのロゴ画像がズレてしまいます
114
+
115
+ ```
116
+
117
+
118
+
119
+
120
+
121
+ ### 該当のソースコード
122
+
123
+ <li class="nav-item img-box"><a href="index.html" class="nav-link"><img src="images/homelogo.png" alt="HOME"></a><div class="relative"><img src="images/homelogoh.png" alt="HOME" class="active"></div>
124
+
125
+ ```CSS
126
+
127
+ ソースコード
128
+
129
+ .img-box {
130
+
131
+ position: relative;
132
+
133
+ }
134
+
135
+ .img-box .active {
136
+
137
+ position: absolute;
138
+
139
+ left: 0;
140
+
141
+ top: 0;
142
+
143
+ opacity: 0;
144
+
145
+ transition: 0.5s; // ゆっくり
146
+
147
+ }
148
+
149
+ .img-box:hover .active {
150
+
151
+ opacity: 1;
152
+
153
+ }
154
+
155
+
156
+
157
+ .relative {
158
+
159
+ position: relative;
160
+
161
+ bottom: 33px;
162
+
163
+ right: -8px;
164
+
165
+ }
166
+
167
+ .absolute {
168
+
169
+ position: absolute;
170
+
171
+ right: 30px;
172
+
173
+ bottom: 30px;
174
+
175
+ }
176
+
177
+ ```
178
+
179
+
180
+
181
+ ### 試したこと
182
+
183
+
184
+
185
+ 位置修正を行いましたが、プルダウンナビメニューもズレて表示されてしまいます。
186
+
187
+ これをどう修正したらいいのかが判りません。
188
+
189
+ どうか、よろしくお願いいたします。
190
+
191
+
192
+
193
+ ### 補足情報(FW/ツールのバージョンなど)
194
+
195
+
196
+
197
+ Bootstrap4.3.1