新生活を充実させるための「こだわり」を取材!!

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

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

教えて!goo グレード

A 回答 (3件)

>それだとマウスオン時に色が変わらないようです。


>元に戻ったときは希望通り戻っているのですが。。。
 それだけだと、アドバイスしようが無い。マウスオン時に何色?
 
 どちらの擬似クラスが有効かわからない・・:hoverと:focusの順番を変えてみるとか・・
    • good
    • 0
この回答へのお礼

ありがとうございます。

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

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

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

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

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

お礼日時:2012/05/18 09:46

スマホだと、ブラウザフィックスは要らないので


#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;
}
で試すとどうなりますか?
    • good
    • 0
この回答へのお礼

ありがとうございます。

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

お礼日時:2012/05/17 20:40

: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と同じものを書いてみましたがダメでした。

補足日時:2012/05/17 15:32
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング