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

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
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="100%"></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="100%"></a></li>




pc { display: none !important; }
.sp { display: block !important; }

.nav_bar li {
width: 50%;
float: left;
}
.nav_01{
background: url(../img/nav_01_sp_on.png) no-repeat;
}

No.1 ベストアンサー 回答者： taigoito 回答日時： 2017/05/17 09:56

僕の読解力が足らず、状況を良く呑み込めませんが、気付いたのは、

imgタグのwidth属性に"100%"の指定は効かないと思います。

HTML5でしたら、width属性、height属性は廃止されているので、
レスポンシブに用いるのでしたら、

img {
display: block;
max-width: 100%;
height: auto;
}

としておけば良いです。

あと、スマートフォン、タブレットでマウスオーバーは無意味だと思います。
タッチ操作なので。

この回答へのお礼

ご回答をありがとうございました！またわからないことがあったら質問いたしますので宜しくお願いします！

お礼日時：2017/05/20 10:29

No.2 回答者： taigoito 回答日時： 2017/05/17 09:59

No.1ですが、訂正です。

width属性、height属性は一部の要素（tableタグなどで）で廃止とのことでした。
imgタグに使っても良いけれど、レスポンシブでいちいち指定して使っている人は少ないと思いますよ。