：hover在链接上不起作用

Question

我正在尝试更改我创建的按钮内链接的背景颜色和文本颜色，但是只有背景颜色会更改。 文本将保留其默认颜色，并且无论！important标签如何都拒绝更改。

这是我的代码：

 button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ padding: 15px; } button, .button, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 12px; padding: 12px 30px; margin-bottom: 10px; width: 200px; border: 1px solid #007af4; color: #007af4; text-transform: uppercase; letter-spacing: 4px; background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ } .button { -webkit-appearance: none; } input[type="submit"] { margin-top: 5px; } button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #007af4; text-decoration: none; color: #FFFFFF; } 

 <div class="button"> <a href="javascript:void(0)" onclick="javascript:jqcc.cometchat.chatWith(<?PHP echo bp_displayed_user_id(); ?>);">Chat with us<a> </div> 

我已经看过以下两个线程：

A：悬停颜色不起作用

A：悬停，颜色没有变化

这些线程上给出的答案都不能解决我的问题（除非我忽略了某些内容），因此，非常感谢任何帮助！

Answer 1

您的CSS实际上没有任何a:hover规则。

您为什么期望会发生什么？

CSS只会执行您告诉它的操作。

Answer 2

如果要在将.button悬停在封闭的.button时更改<a>文本颜色，可以执行以下操作：

.button:hover a {
    color: #FFFFFF
}

这样做的好处是不需要将鼠标悬停在实际的链接上-当您将鼠标悬停在按钮的任何部分上时，链接颜色将更改并保持可读性。

 button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ padding: 15px; } button, .button, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 12px; padding: 12px 30px; margin-bottom: 10px; width: 200px; border: 1px solid #007af4; color: #007af4; text-transform: uppercase; letter-spacing: 4px; background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ } .button:hover a { color: #FFFFFF } .button { -webkit-appearance: none; } input[type="submit"] { margin-top: 5px; } button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #007af4; text-decoration: none; color: #FFFFFF; } 

 <div class="button"> <a href="javascript:void(0)" onclick="javascript:jqcc.cometchat.chatWith(<?PHP echo bp_displayed_user_id(); ?>);">Chat with us<a> </div> 

Answer 3

当你在悬停改变链接的颜色，你需要确保其应用到a直接标签。 因此，在您的情况下，您需要一种类似于以下的样式：

a:hover {
    color: white;
}

Answer 4

链接已经具有预定义的样式。 您需要先删除该样式才能应用您的样式。 在您的链接中尝试

text-decoration: none

之后尝试悬停。