不能让文字装饰消失

Question

我有一排菜单按钮。我希望它们在没有与之交互时是绿色的，在徘徊时是明亮的绿色。在任何情况下都没有下划线或蓝色文字。但无论我做什么，我都会在徘徊前变蓝，在我悬停时用蓝色下划线。与我想要实现的完全相反。

我已经用我能想到的每一种方式看着这个。我压倒一切可能的属性，但没有什么可以坚持的。谁能告诉我我做错了什么？谢谢！

HTML

<div id="menu-buttons">
    <div class="link"><a href="https://www....">btn 1</a></div>
    <div class="link"><a href="https://www....">btn 2</a></div>
    <div class="link"><a href="https://www....">btn 3</a></div>
    <div class="link"><a href="https://www....">btn 4</a></div>
    <div class="link"><a href="https://www....">btn 5</a></div>
</div>

CSS

#menu-buttons {display:inline-block; float:right; padding-top:30px; text-align:center;}
#menu-buttons .link:hover {text-decoration:none; color:#92f200;}
#menu-buttons .link:link {text-decoration:none; color:#92f200;}
#menu-buttons .link:active {text-decoration:none; color:#92f200;}
#menu-buttons .link {
    display:inline-block;
    width:auto; 
    margin-right:20px; 
    color:#73bf00;
    background:transparent; 
    vertical-align:bottom;
    font-size:small;
    text-transform:uppercase;
    text-decoration:none;
}

a {text-decoration:none; color:#73bf00;}
a:visited{text-decoration:none; color:#73bf00;}
a:hover {text-decoration:none; color:#92f200;}
a:visited:hover {text-decoration:none; color:#92f200;}
a:link, a:active {text-decoration:none;}

Answer 1

问题：

1-您的选择器不正确将#menu-buttons .link更改为#menu-buttons .link a。

2-选择器的顺序不正确。

根据W3school：

  

注意：hover必须在：link和：visited（如果它们存在）   在CSS定义中，为了有效！

Jsfiddle

Answer 2

您的CSS代码在第一行末尾的 text-align：center; 后缺少“}”。

即取消其余代码

将其替换为此代码

#menu-buttons {display:inline-block; float:right; padding-top:30px; text-align:center;} 

#menu-buttons .link:hover {text-decoration:none; color:#92f200;}
#menu-buttons .link:link {text-decoration:none; color:#92f200;}
#menu-buttons .link:active {text-decoration:none; color:#92f200;}
#menu-buttons .link {
    display:inline-block;
    width:auto; 
    margin-right:20px; 
    color:#73bf00;
    background:transparent; 
    vertical-align:bottom;
    font-size:small;
    text-transform:uppercase;
    text-decoration:none;
}

a {text-decoration:none; color:#73bf00;}
a:visited{text-decoration:none; color:#73bf00;}
a:hover {text-decoration:none; color:#92f200;}
a:visited:hover {text-decoration:none; color:#92f200;}
a:link, a:active {text-decoration:none;}