人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使わずに、cssの:hover擬似クラス(に近い物)をスマートフォン用サイトに組み込みたいです。

PC用サイトでは<span class="hoge">?</span>で囲まれた文字にマウスポインタを重ねると
cssで指定した文字色に変わるようにしていた部分を、
スマートフォン等のタッチパネルからはタップすると文字色が変わるようにしたいと思っています。

http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
↑このページに書かれているjavascriptを使う方法が最も理想に近かったのですが、
これだと<a href="#">?</a>タグでないと機能しませんでした。
(javascript部分1行目の「getElementsByTagName('a');」を
「getElementsByTagName('span');」に変えてみたりもしましたが駄目でした)

上記サイトのjavascriptを、<a>タグではなく<span>タグに適用する方法もしくは
jQueryを使わずにタップで<span class="hoge">?</span>の文字色を変えられる他の方法がありましたら教えて下さい。

●質問者: hellfencer
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● holoholobird
●250ポイント ベストアンサー
<style>
.button{color:#aaa;}
.click_down{color:#ddd;}
</style>
:
:
<script>
var clickStart = function(e) {
 var t = e.target;
 t.className = "click_down";
}

var clickEnd = function(e) {
 var t = e.target;
 t.className = "button";
}
</script>
:
:
<span class="button" ontouchstart="clickStart(event)" ontouchend="clickEnd(event)" ></div>

という感じでclassを書き換えるのが楽だと思います。


hellfencerさんのコメント
ありがとうございます。タッチパネル環境からも動作確認出来ました! 既存の、タップで色を変えたいspanタグに 「ontouchstart="clickStart(event)" ontouchend="clickEnd(event)"」を追加するのが困難な状況なのですが やはりそれらに適用するのは難しいでしょうか…。

hellfencerさんのコメント
お騒がせしました、上記コメントの既存のspanタグについては自己解決出来ました。 getElementsByClassNameとsetAttributeを使って、 既存のbuttonクラスのspanタグに「ontouchstart="clickStart(event)"」と 「ontouchend="clickEnd(event)"」の2つを追加するようにしたら思い通りに出来ました。 素晴らしいご回答、本当にありがとうございます。

2 ● だわかき
●50ポイント

下記サイトの「jQueryを使わない場合」を試してみてください。
http://ofsilvers.hateblo.jp/entry/js-pseudo-hover


hellfencerさんのコメント
ありがとうございます。 しかし私が質問文中で挙げたサイトに書いてあるjavascriptとほぼ同じ内容の為、 やはり<a href="#">?</a>でないと動作しませんでした。

hellfencerさんのコメント
すみません、上のコメントの「?」は「<a href="#">?</a>」です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ