レスポンシブ時の画像切り替え

Question

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
backgroundで隠している状態なので、％が合わなく画像が見えてしまった状態です。PCのデザインではうまくいくのですが幅を％にすると重ならないです。
SP時のナビデザインはこのようなものを目指しております。
宜しくお願い致します＞＜

<div class="nav_bar">
                        <nav>
                         <ul class="nav_bar_in">
                            <li class="nav_01"><a href="#theme"><img class="pc" src="./img/nav_01_off.png" alt="" width="262"><img class="sp" src="./img/nav_01_sp_off.png" alt="スマートフォン用の画像" width="50%"></a></li>
                            <li class="nav_02"><a href="#plan"><img class="pc" src="./img/nav_02_off.png" alt="" width="262"><img class="sp" src="./img/nav_02_sp_off.png" alt="スマートフォン用の画像" width="59%"></a></li>
                           
                          </ul>
                        </nav>

.top_bnr{
	width:100%;
}

.pc { display: none !important; }
.sp { display: block !important; }
.nav_01{
    background: url(../img/nav_01_sp_on.png) no-repeat;
    width:50%;
	}

Comments

[kei344]

「マウスオーバーしたとき」のコードがありませんので、質問文に追記してください。

Answer 1

上記のようなホバー効果であれば画像に以下のような効果を追加すればいいのではないでしょうか？
目的と違ってたらすみません。

a img:hover {
    opacity: 0.7;
}

Comments

[退会済みユーザー]

h-o 様 ご回答ありがとうございました！またわからにことがあれば質問させて頂きます！

Answer 2

マウスなので、画像の上にマウスが乗ったときに画像のurlを書き換えてしまえば問題ありません。
なので画像のhover時にbackground-colorを変えてみれば行けると思います。
できなかったりしたらまたコメントください。

Comments

[退会済みユーザー]

onokatio 様　コメントありがとうございます。widthも指定しないでやっても重なりませんでした。。BGがはみ出してしまいます。質問欄で添付したレイアウトをするのに詳細なタグをご提示いただけたら嬉しいです。

[退会済みユーザー]

そうでしたか…。ならやはり要素を2つ作り、片方のhoverでもう片方をdisplay: staticにするようにするしかないですかね。

[退会済みユーザー]

onokatio 様 ご回答ありがとうございました！おかげで解決できましたのでまたわからにことがあれば質問させて頂きます。

[退会済みユーザー]

いつでもどうぞ！がんばってください！