html不透明度不会显示在链接上

Question

当我悬停元素时，我试图通过0.5建立链接不透明度。

但是，文字显示opacity:0.5而无需悬停。

这是我的代码：

#a1
{
 position:absolute;
 font-weight: bold;
 top: 503px;
 color:#085da2;
 opacity:1.0;
 }

#a1 a
{
color:#085da2;
opacity:0.5;
}

我想要的是＃a1显示为1.0，但是当页面加载时它显示为0.5而不是：/

Answer 1

您应该使用:hover

#a1 a:hover {
   color:#085da2;
   opacity:0.5;
}

• a：link - 正常的，未访问过的链接
• a：已访问 - 用户访问过的链接
• a：悬停 - 当用户将鼠标悬停在其上时的链接
• a：有效 - 点击该链接时的链接

评论后更新：

a:link {
    color: #009900;   /* This is your green color*/
}

将其更改为color:#085da2;

使用#a1 {color:#085da2; }您不要更改<a>（链接）颜色..您应该将其指定为#a1 a {color:#085da2; }。

Answer 2

如果要在悬停时应用样式，则必须定义：悬停规则。你想要这个：

#a1 a:Hover,
#a1 a:Focus
{
    color:#085da2;
    opacity:0.5;
}

Answer 3

文字显示opacity:0.5而不会将其悬停，因为您已直接应用不透明度。相反，试试这个..

#a1 a
{
position:absolute;font-weight: bold;top: 503px;color:blue;
opacity:1.0;
}

要使悬停效果使用:hover属性来锚定链接，例如

#a1 a:hovor
{
color:#085da2;
opacity:0.5;
}    

希望它有所帮助！

Answer 4

您需要使用悬停伪类。所以您的代码如下：

#a1
{
   position:absolute;font-weight: bold;top: 503px;color:#085da2;
   opacity:1.0;
}

#a1 a:hover
{
   color:#085da2;
   opacity:0.5;
}