Q&A
該当箇所の HTML も提示願います。
はじめまして、お世話になります。
Bootstrap4.3.1を使用しております。
ナビゲーションバーのリスト部分にpng画像を使用しhoverさせたとき微妙にhover画像が左へズレて表示されてしまいますのでcssで、
.relative {
position: relative;
bottom: 33px;
right: -8px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
と位置修正しました。
しかし、今度はドロップダウンリストもズレて表示されてしまいます。
このリストはどの個所を修正すればいいのでしょうか？
すみませんが、どうぞ、よろしくお願いいたします。
html
1<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> 2コード 3```css 4コード
.img-box {
position: relative;
}
.img-box .active {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.5s; // ゆっくり
}
.img-box:hover .active {
opacity: 1;
}
.relative {
position: relative;
bottom: 33px;
right: -8px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
コード
前提・実現したいこと
Bootstrap4のnavバーのリストをロゴ画像にし、かつhoverさせたい。
発生している問題・エラーメッセージ
エラーメッセージはありませんが、元のロゴ画像とhoverのロゴ画像がズレてしまいます
### 該当のソースコード <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> ```CSS ソースコード .img-box { position: relative; } .img-box .active { position: absolute; left: 0; top: 0; opacity: 0; transition: 0.5s; // ゆっくり } .img-box:hover .active { opacity: 1; } .relative { position: relative; bottom: 33px; right: -8px; } .absolute { position: absolute; right: 30px; bottom: 30px; }
試したこと
位置修正を行いましたが、プルダウンナビメニューもズレて表示されてしまいます。
これをどう修正したらいいのかが判りません。
どうか、よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
Bootstrap4.3.1
ありがとうございます。
<body style="padding-top: 56px"><nav class="navbar fixed-top navbar-expand-lg bg-dark"><img src="images/100rogo.png" alt="Hyakunensou"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav ml-auto">
<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>
</ul>
</div>
</nav>
該当CSSは、
.img-box {
position: relative;
}
.img-box .active {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.5s; // ゆっくり
}
.img-box:hover .active {
opacity: 1;
}
.relative {
position: relative;
bottom: 33px;
right: -8px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}.img-box {
position: relative;
}
.img-box .active {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.5s; // ゆっくり
}
.img-box:hover .active {
opacity: 1;
}
.relative {
position: relative;
bottom: 33px;
right: -8px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
です。
どうぞ、よろしくお願いいたします。
長いコードはここでは見づらいため、質問を編集して追記してください。
コードを```で囲うと見やすくなります。
https://teratail.com/help#about-markdown
そうですね。申し訳ありません(;^_^A
書き直します。
<html>
//ここでホームのロゴとhoverの設定をしています。//
<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>
<CSS>
//ロゴ画像のズレ分について調整//
.img-box {
position: relative;
}
.img-box .active {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.5s; // ゆっくり
}
.img-box:hover .active {
opacity: 1;
}
.relative {
position: relative;
bottom: 33px;
right: -8px;
}
.absolute {
position: absolute;
right: 30px;
bottom: 30px;
}
としていますが、根本的に間違っているのでしょうか？
すみませんが、どうぞ、よろしくお願いいたします。
もう一度言いますが、質問を編集して追記してください。
質問への追記・修正の依頼ではなく
何をしたいのかが見えてこないので、図示してもらったほうがいいかもしれません。
それと、.absolute は使われていないようですがいいのでしょうか？
あなたの回答
tips
プレビュー
