スマホでボタンがhoverの状態から元に戻らない

質問

スマホサイトを制作しています。
リンクボタンをhover時にdisplay:blockで色をつけて
ページ移動させていますが、戻るボタンで前のページに戻ると
リンクボタンがhoverの表示のままになっています。
PCで同じサイトを確認するとちゃんと元に戻っています。

原因がわからないので困っています。
よろしくお願いいたします。

回答No.3

ORUKA1951

＞それだとマウスオン時に色が変わらないようです。
＞元に戻ったときは希望通り戻っているのですが。。。
　それだけだと、アドバイスしようが無い。マウスオン時に何色？

　どちらの擬似クラスが有効かわからない・・:hoverと:focusの順番を変えてみるとか・・

お礼

ありがとうございます。

マウスオン時は全く変化がないです。
デフォルトの水色のグラデーションのままです。

hoverと:focusの順番を変えてみましたが同様でした。

いろいろ試していると
background
が何か関係しているようです。

hoverの部分をbackground-colorからbackgroundに変えると
マウスオン時はhover指定の色に変わりますが
戻ったときにその色のままです。

うーん。。。わかりません。

回答No.2

ORUKA1951

スマホだと、ブラウザフィックスは要らないので
#navi a{
display: block;
margin: 0;
padding: 8px 10px;
text-decoration: none;/* ここまでのプロパティは継承されるので一度で良い */
}

#navi a:visited{
background-color:red;
}/* a:linkと排他的なので */

#navi a:link{
background-color:#D9E3F9;
}

#navi a:hover{
background-color:#90AFFE;
}

#navi a:focus{
background-color:yellow;
}
#navi a:active{
background-color:blue;
}
で試すとどうなりますか？

お礼

ありがとうございます。

それだとマウスオン時に色が変わらないようです。
元に戻ったときは希望通り戻っているのですが。。。

回答No.1

ORUKA1951

:hoverではなく、:focusでは？
また、:activeでいったん変えておくと良いかと
a:hover,a:focus{background-color:red;}
a:active{color:yellow;}

補足

ありがとうございます。

cssですが、こんな感じで書いています。

#navi a {
display: block;
margin: 0;
padding: 8px 10px;
text-decoration: none;
background:#D9E3F9;
color:#666;
background-image:-moz-linear-gradient(top,#E3EFFC,#D9E3F9);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#E3EFFC),color-stop(1,#D9E3F9));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3EFFC', EndColorStr='#D9E3F9')"
}

#navi a:hover {
display: block;
margin: 0;
padding: 8px 10px;
background:#90AFFE;
color:#666;
text-decoration: none;
background-image:-moz-linear-gradient(top,#A6C5FE,#90AFFE);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#A6C5FE),color-stop(1,#90AFFE));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#A6C5FE',EndColorStr='#90AFFE')"
}

a:activeにaと同じものを書いてみましたがダメでした。