wordpressのテーマのカスタマイズ リンクのホバー

Question

https://ja.wordpress.org/themes/sydney/
こちらのテーマを使用しています。

普通のテーマだと、スマートフォンでリンクのホバー時に背景が暗くなると思うのですが、このテーマだとそれがなく、とても淡白な感じです。
どのようにしたら暗くなりますでしょうか？

a {					
		text-decoration: none;
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
	}
	a:hover,
	a:focus {
		color: #443f3f;								
		text-decoration: none;
		outline: 0;
		-webkit-transition: all 0.3s ease-in-out;
		   -moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			 -o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
	}

Answer 1

テーマファイルを見ていないのですが、おそらく、スタイルシートで a:hover a:focus 等の疑似要素が設定されていない or スタイルの定義が異なるのだと思いますので、必要な場所にスタイルを設定してください

参考
:active 疑似クラス
:foces 疑似クラス
:hover 疑似クラス
:link 疑似クラス

---

(追記)
sydney デモサイト( https://demo.athemes.com/themes/?theme=Sydney ) を Chrome のレスポンシブモードで、デベロッパーツールを開いて確認してみました。

---

(コメント欄に追記した内容の画像)

デベロッパーツール上で、style.css 438 行目の a:hover a:focus に background-color: bule を 追加してみました。(わかりやすくするために濃い色にしています。)
タイトルのリンクの背景に色がつきましたので、ここに追加すると影をつけれると思います。

Comments

[yosiyosia]

スタイルシートでは設定されているのですが、スマホだとどうしてもhoverがうまくいきません、、

[yosiyosia]

コードを追加しました。

[CHERRY]

他の要素で打ち消されているということはありませんか？

たとえば、パソコン版 Chrome のデベロッパーツールで、スマートフォンの表示を確認できるので、スマホ表示した状態で、HTML や CSS の要素を確認して、 hover 等の疑似要素は、適用されているでしょうか？

Chrome で、レスポンシブ(スマホデザイン)の表示方法は、
https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html を参照

[CHERRY]

デモサイトをデベロッパーツールで、開いた状態の画像を追加しました。

sydney デモサイト( https://demo.athemes.com/themes/?theme=Sydney ) を Chrome のレスポンシブモードのデベロッパーツールで見るかんじは、疑似要素は適用されていない様に見えるのですが...

[yosiyosia]

なにかでうちけされているのでしょうか、、

[CHERRY]

別の項目で上書きされて打ち消されているのであれば、線が引かれていますが、デモサイトを見るかんじでは、疑似要素の項目が表示されないので、設定されていないのではないかと思います。

[yosiyosia]

一応style.cssにはこんな感じで書かれています
a {
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus {
color: #443f3f;
text-decoration: none;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

なんと書いたらよいでしょうか

[CHERRY]

a:hover,
a:focus {
color: #443f3f;

の次に

background-color: blue;

とか入れたら状況は変わりますか？ (確認でわかりやすいように青色にしています。)

[yosiyosia]

背景を変えたいわけではなく、例えばスマホでgoogle検索した時、リンク先を指で長押しすると暗くなるんですが、このテーマだとそれがならなくて、、

[CHERRY]

文章からは、いまいち動作がわからないのですが、Google 以外のサイトで　同じ動作をしているサイトはありますか？
あれば、URL を提示していただけないでしょうか？

[yosiyosia]

ほとんどのサイトでリンク先を長押しすると暗くなります。
https://www.nikkei.com/
例えば日経など

パソコンで見るレスポンシブではなく、実際にスマホを指で操作する時の挙動です。

[yosiyosia]

ちなみにsafariです。

[CHERRY]

やっと意味がわかりました。

CSS の

-webkit-tap-highlight-color:

ですか。

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-tap-highlight-color 参照

CSS には、記載がないので、自分で追加するしかないと思います。

上記でコメントした背景色と同じ位置の

a:hover,
a:focus {
color: #443f3f;

の次の行に

-webkit-tap-highlight-color: red;

を追加するとどうなりますか？　(赤にしています)

[yosiyosia]

おそらくそれです。

[yosiyosia]

解決しました。
丁寧にありがとうございました。