###前提・実現したいこと
HTML、CSSでレスポンシブサイトを構築中です。
スマホでaリンクを押したとき、ボタンが消えてしまいます。
また、次ページから戻った時も消えたままになってしまいます。
やりたいことは、
◆PCでリンクを押下するとき、hoverで背景画像変化。
◆スマホでリンクを押下するとき、背景画像は変化なし。(そもそもhoverの定義ないので)
###発生している問題・エラーメッセージ
◆aリンクを押下時にリンクが消える
◆次ページから戻っても消えたまま
◆PCからは問題なし
###該当のソースコード
html
1<div class="ABC"> 2 <a href="top.php"></a> 3 <a href="javascript:void(0);" onclick="next_buy();return false;"></a> 4</div>
CSS
1.ABC{ 2 text-align:center; 3} 4.ABC a:nth-child(1){ 5 background: url(../img/01.gif) no-repeat; 6 width: 110px; 7 height: 30px; 8 margin: 10px; 9 display: inline-block; 10} 11.ABC a:nth-child(1):hover{ 12 background: url(../img/01hover.gif) no-repeat; 13 transition:0.3s; 14 15} 16.ABC a:nth-child(2){ 17 background: url(../img/02.gif) no-repeat; 18 width: 110px; 19 height: 30px; 20 margin: 10px; 21 display: inline-block; 22 23} 24.ABC a:nth-child(2):hover{ 25 background: url(../img/02hover.gif) no-repeat; 26 transition:0.3s; 27} 28a{ 29 backface-visibility: hidden; 30}
###試したこと
display:inline-blockの場合おかしくなるのではと言われ、inline、blockすべて試す→×
aのbackface-visibilityがbaseのcssに入っていたので、一度消してみる→×
なぜスマホでだけおかしくなるのでしょうか。