質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.79%

Bootstrap4のnavリストに画像を挿入した時、hoverさせるとズレてしまう。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 934

fine2101

score 14

はじめまして、お世話になります。
Bootstrap4.3.1を使用しております。
ナビゲーションバーのリスト部分にpng画像を使用しhoverさせたとき微妙にhover画像が左へズレて表示されてしまいますのでcssで、
.relative {
position: relative;
bottom: 33px;
right:  -8px;
}
.absolute {
position: absolute;
right:  30px;
bottom: 30px;
}
と位置修正しました。
しかし、今度はドロップダウンリストもズレて表示されてしまいます。
このリストはどの個所を修正すればいいのでしょうか?

すみませんが、どうぞ、よろしくお願いいたします。

<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;
}
コード

### 前提・実現したいこと
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>

ソースコード
.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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • fine2101

    2019/05/30 11:22

    そうですね。申し訳ありません(;^_^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;
    }

    としていますが、根本的に間違っているのでしょうか?
    すみませんが、どうぞ、よろしくお願いいたします。

    キャンセル

  • x_x

    2019/05/30 11:26

    もう一度言いますが、質問を編集して追記してください。
    質問への追記・修正の依頼ではなく

    キャンセル

  • x_x

    2019/06/03 16:54

    何をしたいのかが見えてこないので、図示してもらったほうがいいかもしれません。
    それと、.absolute は使われていないようですがいいのでしょうか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る