Q&A
質問文からは a と .hero の関係がさっぱりわからないので、問題を再現できる HTML を開示してください。
実現したいこと
aタグをhoverした際に、ページ全体にオーバーレイをかける、もしくはopacityをかける。
前提
ここに質問の内容を詳しく書いてください。
next、typescriptでホームページを作成しています。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
.menu ul li a:hover {
opacity: 0.1;
color: black;
}
.menu ul li a:hover ~ .hero {
opacity: 0.1; /* 透明度を設定 */
z-index: 99;
}
試したこと
aタグをhoverした際にheroタグ全体の輝度を下げるため、上記の２パターンを試しましたが、反応しませんでした。
他の要素は反応するので、参照先が間違っているわけではありません
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
~は兄弟要素のセレクタなので、a と .hero の関係は兄弟である必要がありますが、そうはなってないのでは。
aタグをhoverした際に、ページ全体にオーバーレイをかける
どのようなオーバーレイか不明瞭ですが、下記のようなCSSでどうでしょうか。
css
1.menu ul li a:hover::after { 2 opacity: 0.1; 3 background: black; 4 content: ""; 5 position: absolute; 6 top: 0; 7 left: 0; 8 width: 100%; 9 height: 100%; 10 z-index: 99; 11 pointer-events: none; 12}
投稿2023/04/21 07:15
総合スコア34367
回答ありがとうございます。
hoverしている間ずっとオーバーレイをかけ続けて、hoverを外したらオーバーレイが元に戻るようなCSSを当てたいです。
私の説明では不備が多いので、「博報堂アイスタジオ」という会社のホームページのメニューをhoverしたときのアニメーションを実装したいと考えています。
こちらが企業のホームページのリンクです。
https://www.i-studio.co.jp/
> hoverしている間ずっとオーバーレイをかけ続けて、hoverを外したらオーバーレイが元に戻るようなCSSを当てたいです。
回答のCSSでそのようになるはずですが、なりませんか。当方のサンプルではなります。
ならないなら、状況を確認できる現状のコードなり、ページのURLを提示ください。
> こちらが企業のホームページのリンクです。
そのページはJSを使っているようですね。
また、オーバーレイにopacityはかかってませんね。
あなたの回答
tips
プレビュー
