Q&A
「ホバーアクション」というのは、CSSにおける疑似クラス:hoverで指定される部分という事で良いでしょうか？
貼り付けて頂いてるソースを見るとログイン画面で、デフォルトでhoverが指定されるのは、aタグくらいに見えますが、そのaタグに下線があらわれるということでしょうか？どの部分に何がでるのか追記下さい。あと、会社名出てますけど大丈夫でしょうか？
現在webアプリケーションを作っているのですが、表題のようにpcのホバーアクションがスマホで見た際、スクロールなどのため要素にタッチしただけで出てしまう状態に悩まされています。
擬似要素:hoverで指定しており、ホバーするとaタグの背景色が変わるという内容でございます。
もともとクライアントサイドのみのファイルをいただきそこにsymfonyのタグを埋め込んだのですが、もとのクライアントサイドのファイルではそういった挙動は見られません。
読み込んでるcssはクライアントサイドのものをコピーしているので、問題はhtmlのほうかと思っております。
下記がhtmlの構造です。
<div class="main-content"> <div id="main" role="main"> <div class="inner"> <div class="content-only-main-01"> <div class="img-prof"> <!-- /img-prof --></div> <h1>アカウントを入力してログイン</h1> <p><a href="/facebook-signup" class="btn facebook-01 w-100"><img src="/common/img/icon-fb.svg" alt="">Facebookでログイン</a></p> <form id="form-login" class="form-signup-01" action="/login" method="post"> <input class="textbox-01 w-100 text-input" type="text" name="email" placeholder="メールアドレス" autofocus> <input class="passwordbox-01 w-100 text-input" type="password" name="password" placeholder="パスワード"> <input type="hidden" name="_csrf_token" value="AZtFyWhTBqNfGRGzThCDteXQJyR6D_pCQDbRt7H0tQk"/> <input class="btn w-100 g-mb0" value="ログイン" type="submit"> </form> <!-- /content-only-main-01 --></div> <div class="content-only-sub-01"> <div class="wrap-col col2"> <div class="left"> <p>パスワードを忘れた方は<a href="/user/password_reset/new">こちら</a>から</p> <!-- /left --></div> <div class="right"> <p>登録しましたか？ <a href="/signup">旅人登録</a></p> <!-- /right --></div> <!-- /wrap-col --></div> <!-- /content-only-sub-01 --></div> <!-- /inner --></div> <!-- /main --></div> <!-- /content --></div> <!-- /wrap --></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/common/js/jquery.min.js"><\/script>')</script> <script src="/common/js/common.js"></script> <script src="/common/js/jquery.validationEngine.js"></script> <script src="/common/js/jquery.validationEngine-ja.js"></script> <script> $(function () { 'use strict';<!-- <div class="ieError"> <dl> <dt>Internet Explorer 8以下でご覧のみなさまへ</dt> <dd>お使いのブラウザは利用推奨環境外です。一部コンテンツが利用できない場合があります。この機会にぜひ<a href="http://www.google.com/chrome/intl/ja/landing.html">Google Chrome</a>や<a href="http://www.mozilla.jp/firefox/">Firefox</a>等の最新のブラウザをお使いください。</dd> </dl> </div> -->
$("#form-login").css('position', 'relative').validationEngine('attach', { promptPosition:"topLeft" });
});
</script>
どなたか原因がわかる方いらっしゃいましたら、ご教授いただけないでしょうか。
cssに対する:hoverの指定で間違いございません。
aタグに対してホバーすると背景色が変わるという内容でございます。
社名の方、ご指摘ありがとうございました。
修正いたしました。
回答1件
0
HTMLを見たところ、特段思い当たる問題は見当たりません。(コピペして、iPhone上のsafariで確かめましたが、タップだけで:hover要素が出てくることはありませんでした。）
少なくともiOS上の、safariでは、:hoverはタップを離したときに適用されます。一方、:activeは、タップしたとき（指をつけたとき）に適用されます。
HTMLの違いで上記のスタイルに違いが現れるというのもちょっとよく分かりません。（もしくは、元のオリジナルファイルからタグやクラス指定を削ってしまったとかであれば、質問のソースだけ見ても分かるはずがありません。）
元のファイルをChromeの要素を検証（もしくはMac上のsimulator.app＋Mac上のsafariからsimulator内のsafariの要素検証）などで見て、当該部分がどういうスタイリングなのかを確認し、現在のファイルと比較してみるしか無いかと思います。
現在のファイルを読み込んだときに、:activeがきちんと指定されているかご確認ください。
投稿2016/03/26 18:05
編集2016/03/28 12:28総合スコア501
あなたの回答
tips
プレビュー
