レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
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%; }
回答2件
あなたの回答
tips
プレビュー