質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

17373閲覧

スマホで要素をタッチした際に、手を離した後にも:hoverの効果が持続してしまいます。対処法を教えて下さい。

jusco

総合スコア80

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/11/06 03:33

編集2022/01/12 10:55

アコーディオンメニューを作成しており、スマートフォン用のメニューも作成しました。

html

1<ul> 2 <li class='dropdown'> 3 <a href='#'>メニュー1</a> 4 <ul class='dropdown-menu'> 5 <li>メニュー1-1</li> 6 <li>メニュー1-2</li> 7 </ul> 8 </li> 9 <li> 10 <a>メニュー2</a> 11 </li> 12</ul>

css

1ul li p ul{ 2 display:none; 3}

javascript

1$(function(){ 2 $('li.dropdown a').click(function(){ 3 $('ul.dropdown-menu').slideToggle; 4 }); 5});

記述は上記のようになっており、'li p'をクリックすることで'ul.dropdown-menu'が表示されます。

こういった記述がある時に、スマートフォンでの挙動に問題が起きました。

・メニューをタッチすると、その要素の'p'にhoverがかかったままになる。
・他要素をタッチしないとhoverが解除されない
・その為、タッチして開くメニューが'p.1'と'p.2'のように複数あった場合、'p.1'を開いた後別のメニューである'p.2'をタッチしても、前にタッチした'p.1'がhoverで選択されており'p.2'が選択できません。

この時'p.1'のhoverが解除されるため、もう一度'p.2'をタッチするとメニューは開くのですが、これではユーザビリティに問題があります。

なんとかjqueryなどで、ある要素をタッチし、指を離した後にその要素のhoverを解除(選択を解除?)したいと考えています。

実現は可能でしょうか?
ご回答よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

:hoverはスマホで触ると最初びっくりしますよね!
スマホの場合は:hoverではなく:activeで実装するとうまくいきますよ!

投稿2015/11/09 09:58

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript にはスマホ用のタッチイベントがありますので、そちらを使ってみてはいかがでしょうか。

touchstart : タッチしたときに発生
touchend : タッチ状態から離れたときに発生

この辺を使えばhover解除出来るのでは無いかと思います。

投稿2015/11/06 04:52

Gusty

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問