Q&A
画像はteratailの投稿機能を利用してください。外部サービスだと何かの時にその外部サービスがアクセスできなかったときに見れなくなります。
また、HTMLも提示してください。
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
https://gyazo.com/b1805efa4eb65d91a659c5a4779c7274
https://gyazo.com/93dd109d65a882dad806ed8b3b9cf5c9
label.hamburger > i:beforeとlabel.hamburger > i:afterにマウスに載ったときに
background-color: #ddd;を適用させたいんですけど、label.hamburger > iは適用されるんですけど
label.hamburger > i:before:hover{
background-color: #ddd;
}
label.hamburger > i:after:hover{
background-color: #ddd;
}
と入力しても適用されないんですけどどうしたらよいでしょうか
「疑似要素にhover」とかで検索して見つかりませんか？
見つかんないですね
> Latorll-5541さん
検索する際は単語を切った方が引っ掛かりやすいですよー
あとは、「できない」「効かない」等の文字も付けておくと、かなり検索で引っ掛かるようになります。
参考までに僕が取った行動を回答に載せておきました。
真似していただくと解決スキルがアップするかもですっ
はて。出てきた結果上から３つまでで解決しそうでしたけど。
何読んで何試しました？
質問編集して追記してください。
amiya-seさんm.tsさんありがとうございます！
いけましたね
もし自身でも解決できたのでしたら、質問してから解決するまでの経緯を自身でまとめて回答として投稿すると同じような問題を抱えた誰かの参考になると思います。
の、前に質問内容調整しておいてください。画像の件、質問前に調べたこと試したこと。
回答2件
0
ベストアンサー
文法的には、疑似要素はセレクタの最後でなくてはいけないことになっています。
擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。
擬似要素 (Pseudo-elements) - CSS: カスケーディングスタイルシート | MDN
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.
5.2 Selector syntax | Selectors
（訳）単純セレクタは、タイプセレクタまたは全称セレクタに、0個以上の属性セレクタもしくはIDセレクタもしくは疑似クラスを任意の順序でつけたものです。
投稿2021/03/13 02:33
総合スコア36946
0
回答 ::afterと:hoverの順番を入れ替えればできるかも
僕が今取った行動を記しておきます。
参考になれば幸いです。
::beforeや::afterは疑似要素だからー…「疑似要素 hover」で検索。- 「疑似要素 hover 効かない」が予測変換で出てきたのでクリック。
- 上から流し見…
「CSSの疑似要素afterに対して、:hoverを設定することは可能… 」
というタイトルでこれかな？と判断しクリック
0. 中身見て、::afterと:hoverを入れ替えればいい、と知る
0. teratailの回答欄に書き込み
以上になります。
以下蛇足です。
昔自分もハマったような気がします。
調べ捲って::beforeや::afterは:hoverの後ろにつけると知り、
「：の数が１つのhoverが先に来る、：の数が２つの疑似要素が後に来る」と覚えました。
なぜ覚えたのかはすっかり忘れてましたけどｗ
昔は:beforeと:afterだったのに::beforeと::afterに変わった理由が、
案外この辺りにあったのかなと思ったり…
完全に余談ですが:hoverなどの：1つは疑似クラスというようです。
また何かでハマった際にご活用いただければ幸いです。
投稿2021/03/12 11:41
編集2021/03/12 11:42退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
