グローバルCOLOR不透明度ホバーオーバーレイ？

Question

グローバルリンク不透明オーバーレイのために以下を使用しています。

a:hover { 
    text-decoration: none; opacity: 0.6; /* css standard */ 
    filter: alpha(opacity=60); /* internet explorer */ 
} /* mouse over link */ 

どのように色を追加できますか？これはCSSで可能ですか、JS/jQueryソリューションのみを検討していますか？

Answer 1

たとえば、そして、あなたのコードは

a:hover {text-decoration: none; opacity: 0.6; /* css standard */ 
filter: alpha(opacity=60); /* internet explorer */ /* mouse over link */ background: #000; } 

になり、あなたが黒などの色を持っているタグをしたい場合は、あなたのCSSはあなたには、いくつかの理由でこの

a:hover {text-decoration: none; opacity: 0.6; /* css standard */ 
filter: alpha(opacity=60); /* internet explorer */ /* mouse over link */ color: #000; } 

のようになります。背景になるように黒あなたのコードに余分な}があります。

Answer 2

a:hover{ 
    /* your stuff here */ 
    color:#f00;    // older browsers 
    color: rgba(255,0,0,0.4); // browsers with rgba support (r,g,b,alphaOpacity) 
} 

Answer 3

不透明度が全く必要ありません。あなたが探している効果は、透明な背景です。 rgba()にrgb()フォールバックを使用して、代わりに透明な背景を定義します。

a:hover { 
    text-decoration: none; 
    background: rgb(255,0,0) /* fallback */ 
    background: rgba(255,0,0,0.6) /* red with 60% opactiy */ 
    color: #000; 
}