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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

4728閲覧

スマホでaリンクを押下したときに背景画像が消えます。

karaage617

総合スコア8

hover

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/02/01 03:09

###前提・実現したいこと
HTML、CSSでレスポンシブサイトを構築中です。
スマホでaリンクを押したとき、ボタンが消えてしまいます。
また、次ページから戻った時も消えたままになってしまいます。
やりたいことは、
◆PCでリンクを押下するとき、hoverで背景画像変化。
◆スマホでリンクを押下するとき、背景画像は変化なし。(そもそもhoverの定義ないので)

###発生している問題・エラーメッセージ
◆aリンクを押下時にリンクが消える
◆次ページから戻っても消えたまま
◆PCからは問題なし

###該当のソースコード

html

1<div class="ABC"> 2 <a href="top.php"></a> 3 <a href="javascript:void(0);" onclick="next_buy();return false;"></a> 4</div>

CSS

1.ABC{ 2 text-align:center; 3} 4.ABC a:nth-child(1){ 5 background: url(../img/01.gif) no-repeat; 6 width: 110px; 7 height: 30px; 8 margin: 10px; 9 display: inline-block; 10} 11.ABC a:nth-child(1):hover{ 12 background: url(../img/01hover.gif) no-repeat; 13 transition:0.3s; 14 15} 16.ABC a:nth-child(2){ 17 background: url(../img/02.gif) no-repeat; 18 width: 110px; 19 height: 30px; 20 margin: 10px; 21 display: inline-block; 22 23} 24.ABC a:nth-child(2):hover{ 25 background: url(../img/02hover.gif) no-repeat; 26 transition:0.3s; 27} 28a{ 29 backface-visibility: hidden; 30}

###試したこと
display:inline-blockの場合おかしくなるのではと言われ、inline、blockすべて試す→×
aのbackface-visibilityがbaseのcssに入っていたので、一度消してみる→×

なぜスマホでだけおかしくなるのでしょうか。

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

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

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

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

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

Neko_doshi

2017/02/01 05:25

Chromeの開発ツールのスマホViewerでも同じ現象が起きるのでしょうか? おきるようであればそのときの要素のスタイルはどうなっている感じでしょうか?
guest

回答1

0

消えた様にみえるのはtransitionでプロパティが指定されてないからですにゃ。

CSS

1transition: background 0.3;

背景だけ変えたいならプロパティbackgroundやbackground-imageが必要です。

そしてhoverはモバイルでも拾われるので、PCだけにしたいなら

  1. UserAgent判別してPC/SPをクラス分けした上でPCクラスで指定する
  2. :hoverをやめて.onHoverなどクラスで指定する
  3. メディアクエリ(min-width等)でPC以上のサイズで指定する
  4. メディアクエリ(hover)を使って指定する

これのどれかを使えばできますにゃ。

スマホだけちがうのは、イベントの扱いが違うからですね。

投稿2017/02/20 09:55

nyancat

総合スコア132

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問