※ ChatGPTを利用し、要約された質問です（原文：a:hover時のみ、divの背景を変えたい）
a:hover時のdivの背景を変える方法
このQ&Aのポイント
div内のa領域にオンマウスした時にだけ、背景の透明度を変える方法について質問です。
現在のコードではa要素の背景の透明度しか変わらないため、解決策を探しています。
セレクタを組み合わせて色々試したり、検索もしましたが、うまくいきません。どのように記述すればいいでしょうか？
index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。
イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。
同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、
<html>
<head>
<style type="text/css">
div{
background-color: #CCCCCC;
width: 100px;
height: 100px;
opacity: 0.5;
filter: alpha( opacity=50 ); /* IE */
}
a:hover{
opacity: 1;
filter: alpha( opacity=100 ); /* IE */
}
</style>
</head>
<body>
<div><a>リンク</a></div>
</body>
</html>
div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。
また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。
今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。
お礼
今までHTMLとCSSしか書いたことが無かったのですが、 javascriptも少し勉強してみようと思います。 ご回答どうもありがとうございました。