transparentが効かない

Question

CSSでaタグホバー時に色をtransparentにしたいのですが効きません。
他の色にすると聞きます。
transparentにするにはどうすればいいのでしょうか。

<nav class="gnavi">
  <img src="logo.png" alt="">
  <ul>
    <li><a href="#">プロフィール</a></li>
    <li>ブログ</li>
    <li>問い合わせ</li>
  </ul>
</nav>
コード

.gnavi{
display:flex;
height:110px;
background-color:#ED5D60;
}
.gnavi img{
width:130px;
height:100px;
margin-top:5px;
margin-left:430px;
margin-right:50px;
}

.gnavi ul{
display:flex;
}

.gnavi li{
font-size:25px;
color:#292828;
margin:40px 40px 40px 100px;
font-weight:bold;
}

.gnavi a{
text-decoration:none;
color:#292828;
}

.gnavi a:hover{
background-color:transparent;
}

.gnavi>ul>li>a{
padding:10px;
  
}
.gnavi:any-link{
 cursor: pointer;
}
コード

Answer 1

提示されるHTMLとCSSが断片的で、あなたの手元でどう表示されているかわかりませんが、足りないところを推測で補って作ったWebページでは、transparentはちゃんと動いていますね。.gnavi aに適当な(周囲とは異なる色の)background-colorを指定してみれば検証できますよ。

追加分:
質問者のイメージする「透明」は、CSSのtransparentが意図する透明色ではなく、色指定におけるアルファー値(透明度とか不透明度とか)で実現するものだった。
この場合、文字色を含めて半透明にしたいわけではないので、opacityではなく、background-color: rgba(R, G, B, A);を指定して、Aの値を調整すればいいのでは。

Comments

[ponchineey09083]

ご回答ありがとうございます・
他の色に指定すると効きます。
transparentにしてホバー時に透明にしたいのですがどうしたらいいのでしょうか。

[Daregada]

ですから、ちゃんと「ホバー時に透明」になっていますよ。「.gnavi a」で指定したリンクの背景色から透明色になり、背後にある(こちらで推測で作ったWebページではbody要素の)背景色が見えています。

あなたが想定している「transparentにしてホバー時に透明にしたい」を、別の言葉で説明してください。
リンクの背景色は、当初はどのような色になっていて、ホバー時に透明になるとどのような色が見えるのでしょうか。

[ponchineey09083]

失礼しました。
CSS上部ににコードを追加しました。
当初は赤色でホバー時にCSSでpadding10pxで指定したaタグの領域を透明（赤が薄くなる）ようにしたいです。

[Daregada]

CSSで背景色に「transparent」を指定すると、自動的に「色が薄くなる」と言うことはありません。

[Daregada]

背景に画像が表示されているなら、やりたいことは「background-color: rgba(R, G, B, A);」でアルファー値Aを調整すればできるでしょう。背景がただの色なら、「background-color」で「薄くなった赤」を指定すればいいのでは。

[ponchineey09083]

ありがとうございます。

[ponchineey09083]

よくインターネットのホームページのナビをかざすと透明ぽく見えるのはどんなものを使っていると思いますか？

[Daregada]

上のコメントや修正した回答をお読みになってください。

[ponchineey09083]

ありがとうございます。できました。