transparentが効かない

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;
}
コード

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

投稿2020/06/22 00:54

編集2020/06/22 02:25

Daregada

総合スコア11990

ponchineey09083

2020/06/22 01:18

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

Daregada

2020/06/22 01:25 編集

ですから、ちゃんと「ホバー時に透明」になっていますよ。「.gnavi a」で指定したリンクの背景色から透明色になり、背後にある(こちらで推測で作ったWebページではbody要素の)背景色が見えています。あなたが想定している「transparentにしてホバー時に透明にしたい」を、別の言葉で説明してください。リンクの背景色は、当初はどのような色になっていて、ホバー時に透明になるとどのような色が見えるのでしょうか。

ponchineey09083

2020/06/22 01:44

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

Daregada

2020/06/22 02:02

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

Daregada

2020/06/22 02:16

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

ponchineey09083

2020/06/22 02:32

ありがとうございます。