:hover无法处理链接

时间:2017-09-05 18:39:28

标签: javascript html css

我正在尝试更改我创建的按钮内链接的背景颜色和文本颜色,但只更改了背景颜色。文本仍为默认颜色,无论重要标记如何,都拒绝更改。

这是我的代码:



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>
&#13;
&#13;
&#13;

我已经看过这两个主题:

a:hover color is not working

a: hover, color is not changing

这些主题上给出的答案都没有解决我的问题(除非我忽略了某些内容),所以非常感谢任何帮助!

4 个答案:

答案 0 :(得分:4)

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

为什么你会发生某些事情?

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

答案 1 :(得分:2)

如果要将鼠标悬停在封闭式<a>上时更改.button文字颜色,可以执行以下操作:

.button:hover a {
    color: #FFFFFF
}

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

&#13;
&#13;
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;
}
&#13;
<div class="button">
  <a href="javascript:void(0)" onclick="javascript:jqcc.cometchat.chatWith(<?PHP echo bp_displayed_user_id(); ?>);">Chat with us<a>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

当您在悬停时更改链接颜色时,您需要确保直接将其应用于a标记。因此,在您的情况下,您需要一个类似于以下的样式:

a:hover {
    color: white;
}

答案 3 :(得分:0)

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

text-decoration: none

在此之后尝试悬停。