我正在尝试更改我创建的按钮内链接的背景颜色和文本颜色,但只有背景颜色发生变化。文本保持默认颜色并且拒绝更改,无论 !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: hover, color is not changing
这些线程上给出的答案都没有帮助解决我的问题(除非我忽略了什么),所以非常感谢任何帮助!
最佳答案
您的 CSS 实际上没有任何 a:hover
规则。
为什么你期望某事发生?
CSS 只会按照您的指示执行。
关于javascript - :hover is not working on links,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46061388/