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>の文字色を変えられる他の方法がありましたら教えて下さい。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/22 20:53:24
  • 終了:2013/07/24 02:15:17

ベストアンサー

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/07/22 22:51:20

ポイント250pt
<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を書き換えるのが楽だと思います。

id:hellfencer

ありがとうございます。タッチパネル環境からも動作確認出来ました!

既存の、タップで色を変えたいspanタグに
「ontouchstart="clickStart(event)" ontouchend="clickEnd(event)"」を追加するのが困難な状況なのですが
やはりそれらに適用するのは難しいでしょうか…。

2013/07/23 18:09:56
id:hellfencer

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

素晴らしいご回答、本当にありがとうございます。

2013/07/24 02:12:06

その他の回答(1件)

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/07/22 22:51:20ここでベストアンサー

ポイント250pt
<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を書き換えるのが楽だと思います。

id:hellfencer

ありがとうございます。タッチパネル環境からも動作確認出来ました!

既存の、タップで色を変えたいspanタグに
「ontouchstart="clickStart(event)" ontouchend="clickEnd(event)"」を追加するのが困難な状況なのですが
やはりそれらに適用するのは難しいでしょうか…。

2013/07/23 18:09:56
id:hellfencer

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

素晴らしいご回答、本当にありがとうございます。

2013/07/24 02:12:06
id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/07/23 08:44:51

ポイント50pt

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

id:hellfencer

ありがとうございます。
しかし私が質問文中で挙げたサイトに書いてあるjavascriptとほぼ同じ内容の為、
やはりでないと動作しませんでした。

2013/07/23 18:13:04
id:hellfencer

すみません、上のコメントの「~」は「<a href="#">~</a>」です。

2013/07/23 18:14:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません