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

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

このQ&Aに関連する最新のQ&A

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に関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q男性ハリウッド俳優の人気ランキングを教えてください!

男性ハリウッド俳優の人気ランキングを教えてください!

できたら20位まで

Aベストアンサー

男優の人気ランキングと言っても、国や性別・年齢・調査方法などによって変って来ますので、一概には決められないのですが、ちょうど先日TV朝日のSmaStationで「大人が選んだハリウッド男優ベスト25」が放送されました。
それによると、
25位   ジョン・トラボルタ
24位   ロバート・デ・ニーロ
23位   マイケル・J・フォックス
22位   マット・デイモン
21位   アル・パチーノ
20位   ショーン・ペン
19位   アンソニー・ホプキンス
18位   ケヴィン・コスナー
17位   オーランド・ブルーム
16位   ロバート・レッドフォード
15位   エディ・マーフィ
14位   ブルース・ウィリス
13位   クリント・イーストウッド
12位   シルベスター・スタローン
11位   ヒュー・グラント
10位   ダスティン・ホフマン
 9位   キアヌ・リーブス
 8位   ウィル・スミス
 7位   トム・ハンクス
 6位   ブラッド・ピット
 5位   レオナルド・ディカプリオ
 4位   アーノルド・シュワルツェネッガー
 3位   トム・クルーズ
 2位   リチャード・ギア
 1位   ジョニー・デップ
このような順位になっていました。

男優の人気ランキングと言っても、国や性別・年齢・調査方法などによって変って来ますので、一概には決められないのですが、ちょうど先日TV朝日のSmaStationで「大人が選んだハリウッド男優ベスト25」が放送されました。
それによると、
25位   ジョン・トラボルタ
24位   ロバート・デ・ニーロ
23位   マイケル・J・フォックス
22位   マット・デイモン
21位   アル・パチーノ
20位   ショーン・ペン
19位   アンソニー・ホプキンス
18位   ケヴィン・コ...続きを読む

Q特定のページではなく、元のページに「戻るボタン」でリンクさせる方法は?

質問させて頂きます、
IBMホームページビルダーでV10でサイトを作成していますが、リンクの方法で質問させて頂きます。
例えば、「Aページ」「Bページ」「Cページ」の各ページから、掲示板を設置してある「Xページ」にリンクさせる方法は、「ABC各ページ」の「掲示板へ」ボタンにリンクの設定で「Xページ」を指定すれば良いのですが、この逆に、「Xページ」の「戻る」ボタンを押した時に、リンク元の「ABC各ページ」に戻る様に設定するのはどうしたら良いでしょうか?
宜しくお願い致します。

Aベストアンサー

Javascriptを使ってブラウザバックと同じ効果を持つリンクを設定する方法があります。

→http://www.red.oit-net.jp/tatsuya/java/button.htm

Q現在の海外ブランドの人気ランキング10を教えてください。宜しくお願いします。

現在の海外ブランドの人気ランキング10を教えてください。
宜しくお願いします。

Aベストアンサー

ご質問者の意図とする人気ランキングは何でしょうか?
日本国内のインターネット検索アクセス数、各ブランドの日本国内売上、他にもいろいろな見方があると思います。どんなデータを探しているのでしょうか?

最初の回答者へ:
ブランドのランキングは、データによってはブランド側にとっても貴重なマーケット情報になりますよ。ブランドが全く分かっていない人が利用するだけではありません。

Qボタンにリンクをかけたら、ボタンが表示されない。

ボタンにリンクをかけずに転送すると、思うとおりにきちんと表示されるのですが、
ボタンにリンクをかけたとたん、ボタンは表示されなくなり、画像枠と代替テキストが表示されてしまいます。
またそのボタンを配置したフレームの背景gifも反映されなくなります。
何度もフォルダーをつくりなおしたり、試行錯誤しているのですが・・・・
制作に使っているPC上ではボタン表示も背景も問題ないのですが、他のPCではこの問題が起こっています。
アドヴァイスのほどよろしくお願いいたします。
ホームページビルダー9を昨日アップデートして使っています。

Aベストアンサー

http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F13649256FD4003585E8?opendocument

http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0953

取りあえず、↑を一通り確認してみてください。

他にはセキュリティソフトが邪魔をしていないか。
(一時無効で見たとき、表示されたらこれですね)

サイト(ビジュアルサイトビューだったかな。それでみたとき「リンクエラー」の欄にそれがあるかないか。
各ページに「×(赤字)」があるかないか、ある場合はエラーが発生してます。

ビルダー9の修正プログラムはDLしましたか↓

http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F13649256FA8001D21C7?opendocument

Q【電子書籍人気ランキングについて】

【電子書籍人気ランキングについて】

現在、電子書籍を始めてみようかなーと思っています。
しかし、サイトがあり過ぎ、また口コミ情報も少なく、何が良いサイト(かつ安全なサイト)
なのか分かりません。

電子書籍サイトの人気ランキングや、口コミ情報などございましたら教えてください。

※ジャンルは小説やコミック何でも構いません。

よろしくお願い致します。

Aベストアンサー

確かに最近は、やたらめったらサイトが増えてよくわかりませんね。
で、ランキング情報では無いのですが..

"小説系の本" であれば、サイトの信頼性, 決済方法の安心感, 登録の必要な個人情報の少なさ などの観点から初めての方に向いているのは、ビットウェイブックスさんじゃないか、と私は思います。
 →クレジットカード決済でも良いのであれば、話は変わってきます。
印刷会社の2強のうちの1社の凸版印刷さんの関連会社の運営するサイトです。
少し操作性は悪いですが、品揃えも他の大手と比べても遜色ありません。
まあ、最近はリニューアルを行う可能性のあるサイトが多いので、いつまでこの通りであるかはわかりませんが..

あと、ここのブログ(参考URL部分に記載)に、初めての方向けのQAと購入手順が載ってます。
私のブログなんですけどね... (-_-;)
良かったら覗いて見てください。

参考URL:http://kaichi01.seesaa.net/article/167013212.html

Qアイコンにリンクを張り付けると他の画像などがリンク状態になります。

アイコンにリンクを張り付けたとき、他文字や画像もリンク状態になります。
その原因についてご教示お願いします。

例示のページ構成は次の通りです。
●画面構成は全体が幅695のテーブルで同じ幅のTdセル内に記載しています。
●ケース1からケース3は夫々独立した、幅690のテーブルで同じ幅のTdセル内に記載しています。
●ケース3だけは独立した幅690のテーブルに、さらに同じ幅のテーブルと(3個のTdセル(幅合計690))内に記載しています。

Aベストアンサー

<a href=
で始まるタグに対して
</a>
で閉じていないだけに見えますが・・・?

Qパチンコの人気ランキングとは

パチンコの人気ランキングが見れるサイトについてお教え下さいませ。

Aベストアンサー

 こんにちは。またお会いしましたね。
(~_~) 御質問のタイトルで、私の端末でグーグルの検索した所、P-WORLDのほか3~4件程あったようです(時間かかるので 詳しく中身は見ていません)。三洋の大海SPシリーズ、エゥ"アンゲリオンシリーズ、花の慶次、冬のソナタ2 などになるのは目に見えていますが… 最近は、どこのお店も渋いから、一度ある機種でマイナス収支になると、どうしても その同じ機種で取り返してやる!となって、ほかの機種打つ余裕(金額の あるいは心の)が ないんですよね。では さようなら。

Q[css] a:hoverの背景画像に半透明PNGを使いたい

いつもありがとうございます。
IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。

そもそものやりたいことは、
【画像A(normal.jpg)にマウスオーバーすると、(透明度15%白色の画像がかかり)少し白っぽくなる】
です。画像Aにはリンクを張ります。

下記のように、背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしました。
firefoxなどではうまく行きました。
IE用に、AlphaImageLoaderを使ったのですが、ダメです。(効いてない時と同じ、薄い青グレーになります)
ブロック要素にしかダメらしいので、くどくdisplay:blockを使ったのですが…

どなたか解決策、教えていただけませんか!!??


※画像Aと、画像Aに白みがかった画像Bをつなげて縦長にして、
hoverでズラす方法は、無しでお願いします。


=========================

<html>
<head>
<style>

* {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
background: transparent;
}

#trans {
width: 100px;
height: 100px;
background: url(img/normal.jpg) 0 0 no-repeat;
}

#trans a {
display: block;
width:100px;
height:100px;
background: none;
}

#trans a:hover {
background: url(img/trans.png) 0 0 no-repeat;
}

* html #trans a:hover {
display: block;
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/trans.png', sizingMethod='scale');
}

</style>

</head>
<body>
<div id="trans">
<a href="#">あああ</a>
</div>
</body>
</html>

いつもありがとうございます。
IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。

そもそものやりたいことは、
【画像A(normal.jpg)にマウスオーバーすると、(透明度15%白色の画像がかかり)少し白っぽくなる】
です。画像Aにはリンクを張ります。

下記のように、背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしました。
firefoxなどではうまく行きました。
IE用に、AlphaImageLoaderを使ったのですが、ダメです。(効いてない時と同じ、薄い青グレ...続きを読む

Aベストアンサー

こんにちは

半透明PNGもAlphaImageLoaderも使用したことが無いので詳細は分からないのですが・・・こういう感じのものをしたいということですか?

<style type="text/css"><!--
.trans{
position:relative;
width:100px;
height:100px;
}

a {
background-image:url("sample1.gif");
background-repeat:no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:0px;
left:0px;
}

a:hover {
opacity:0.5;
}

span {
position:absolute;
top:0px;
left:0px;
color:red;
}

--></style>

<!--[if IE]>
<style type="text/css"><!--
a:hover {
filter:alpha(opacity=50);
}
--></style>
<![endif]-->

<div class="trans">
<a href=""></a>
<span>あああ</span>
</div>


※透明度の設定が100%表示の内の15%なのか85%なのか分からなかったのでとりあえず50%にしてます
opacity:0.5;
filter:alpha(opacity=50);

※ダミースペースとなる .trans が必要なのでインライン上ではwidth:height:が取れない為使いにくいですが・・・

こんにちは

半透明PNGもAlphaImageLoaderも使用したことが無いので詳細は分からないのですが・・・こういう感じのものをしたいということですか?

<style type="text/css"><!--
.trans{
position:relative;
width:100px;
height:100px;
}

a {
background-image:url("sample1.gif");
background-repeat:no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:0px;
left:0px;
}

a:hover {
opacity:0.5;
}

span {
position:absolute;
top:0px;
left:0px;
...続きを読む

Qアニメの年間の人気ランキングをしりたいです。

アニメの年間の人気ランキングをしりたいです。載っている雑誌かサイトなどの情報を教えてもらえないでしょうか?

Aベストアンサー

一口に「人気ランキング」といっても、いろんな趣旨がありますね・・・。
『年間の』という条件が付くと、子供や一般人を対象としたランキングはあまり見当たりません。
そこで、私はアニメファンの人たちによる投票ランキングを。

「月刊アニメージュ」では、毎年2月発売の“3月号”で前年のアニメの人気投票を募り、3ヶ月後の“6月号”で結果発表をしています。
結果判明が遅いのが難点ですが、規模としては最も大きいかと。

他に、ネット上ではこんな企画もあります。
http://www2.pure.cc/~mikimomo/home/omoituki/kanso_ritsu.html
左の「CONTENTS」欄のうち、「終」のリンクをご覧ください。
これは、作品を見た人の数にとらわれず、最後まで見た人だけで点数を付けてランキングにしようという試みです。
どうしてもメディア露出の数に左右されやすい「アニメージュ」よりも、隠れた名作といわれるアニメがしっかり高得点になっているのが特徴です。

Qページ内リンクに他のページからリンクする方法

ページ内リンクに他のページからリンクする方法ってありますか?

初歩的な質問ですいません。

タイトルでは分かり辛いので、例を書きます。

ページ1にA・B・C・D・Eと見出しの付いた文章があります。左側に対応したリストを作って、ページ内でリンクを貼っています。

ページ2に、ページ1で作った見出しCに関連する記述があり、そこにリンクを作成して、ページ1の見出しCを表示したいのです。

ページ2から、ページ1の中にあるページ内リンクを指定する事は出来ますでしょうか?

※見出しCだけ抽出されると言う意味では無く、ページ1で見出しCのリンクを押した時と、同じ表示でかまいません。

ページ1の左側リスト
<tr>
<td><A Href="#page_linkA">りんご</A></td>
<td><A Href="#page_linkB">みかん</A></td>
<td><A Href="#page_linkC">スイカ</A></td>
<td><A Href="#page_linkD">柿</A></td>
<td><A Href="#page_linkE">メロン</A></td>
</tr>

ページ1の本文
<A Name="page_linkA"><p>りんごは大好きです</p>
<A Name="page_linkB"><p>みかんはあまり好きではありません</p>
<A Name="page_linkC"><p>スイカは塩を振ってたべます</p>
<A Name="page_linkD"><p>柿より牡蠣が食べたい</p>
<A Name="page_linkE"><p>メロン…高くて食べれません</p>

ページ2から<A Name="page_linkC"><p>スイカは塩を振ってたべます</p>を表示するリンクを貼りたいのです。

この説明で解ってもらえますでしょうか?宜しくお願いします。

ページ内リンクに他のページからリンクする方法ってありますか?

初歩的な質問ですいません。

タイトルでは分かり辛いので、例を書きます。

ページ1にA・B・C・D・Eと見出しの付いた文章があります。左側に対応したリストを作って、ページ内でリンクを貼っています。

ページ2に、ページ1で作った見出しCに関連する記述があり、そこにリンクを作成して、ページ1の見出しCを表示したいのです。

ページ2から、ページ1の中にあるページ内リンクを指定する事は出来ますでしょうか?

※見出しCだけ抽...続きを読む

Aベストアンサー

HTMLに根本的な間違いがありますので、それは無視して説明します。

[HTML1]fruit.html

<div class="nav"><!-- ナビゲーションなら -->
<!-- <div class="contentTable"> 目次なら -->
 <ol>
  <li><a href="#apple">りんご</a></li>
  <li><a href="#orenge">オレンジ</a></li>
 </ol>
</div>
<div class="section" id="apple">
 <h1>りんご</h1>
 <p>段落</p>
</div>
<div class="section" id="orenge">
 <h1>みかん</h1>
 <p>段落</p>
</div>
<div class="footer">
</div>

[HTML2]

<div class="section">
 <h2>私の好きな果物</h2>
 <p>私は、<a href="fruit.html$apple">りんご</a>が大好きです。なぜなら・・。食べるときは洗ってそのまま・・</p>
 <p>しかし、最近は歯茎から・・</p>
</div>

とか、
★aの内部には<p>というブロック要素は入れられませんし、a要素は必ず閉じなければなりません。ブロック要素とは、その前後で改行されてしまうような要素のこと。
★HTMLは、きちんと文書構造にしたがって作成しましょう。箱にして並べたければ、スタイルシートでそのように指定します。

 もう一度
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
あたりから、きちんと始めてください。
 変な道に迷い込むと、引き返すのが大変です。

 少し書いたら
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )

★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
でチェックしてみましょう。

 このとき、デザインのことは一切考えないこと。HTMLはデザインする道具じゃありません。

 そして次にスタイルシートを勉強しましょう。

HTMLに根本的な間違いがありますので、それは無視して説明します。

[HTML1]fruit.html

<div class="nav"><!-- ナビゲーションなら -->
<!-- <div class="contentTable"> 目次なら -->
 <ol>
  <li><a href="#apple">りんご</a></li>
  <li><a href="#orenge">オレンジ</a></li>
 </ol>
</div>
<div class="section" id="apple">
 <h1>りんご</h1>
 <p>段落</p>
</div>
<div class="section" id="orenge">
 <h1>みかん</h1>
 <p>段落</p>
</div>
<div class="footer">
</div>

[HTML2]

<div class="se...続きを読む


人気Q&Aランキング

おすすめ情報