Question

我的style.css规则适用于整个网站：

a:hover{text-decoration:underline;color:#E35B00;}

我也在我的button.css中：

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;   
    padding: .5em 1.5em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

在我的html页面中，我在button.css：

之前声明了style.css

<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/button.css" media="screen" rel="stylesheet" type="text/css" />

代码是：

<div>
<form action="dosomething.htm" method="post">
<input type="submit" class="button blue" value="Option 1">
<a href="#" class="button green" onclick="callafunction()">Option 2</a>
</form>
</div>

蓝色按钮（选项1）悬停没有问题，因为它不是锚点。然而，当鼠标悬停在“选项2”上时，绿色按钮（选项2）将变为a：hover的颜色，即#E35B00橙色而不是#538018;绿色！

在Firefox开发者规则控制台上，我看到a：hover低于绿色：悬停。为什么会这样？我尝试重新排列css的顺序但是没用。 a：hover接管绿色：悬停。这让我疯了。非常感谢您的帮助。提前谢谢。

Answer 1

当您将鼠标悬停在.green按钮上时，您永远不会指定文本的颜色，因此默认为a:hover。要解决此问题，您只需添加.green按钮到CSS .green:hover规则的颜色即可。

整个.green:hover CSS规则应如下所示。

.green:hover {
    color: #e8f0de;
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

a:hover {
  text-decoration: underline;
  color: #E35B00;
}
.button {
  display: inline-block;
  zoom: 1;
  /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: .5em 1.5em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.green {
  color: #e8f0de;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  color: #e8f0de;
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top, #6b9d28, #436b0c);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
  color: #a9c08c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
  background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

<div>
  <form action="dosomething.htm" method="post">
    <input type="submit" class="button blue" value="Option 1" />
    <a href="#" class="button green" onclick="callafunction()">Option 2</a>
  </form>
</div>

另一种选择是将!important放在color: #e8f0de CSS规则中.green之后。无论如何，!important都会使财产优先。

如果你想这样做，那么.green规则的第一行应该是。

color: #e8f0de !important;

a:hover {
  text-decoration: underline;
  color: #E35B00;
}
.button {
  display: inline-block;
  zoom: 1;
  /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: .5em 1.5em .55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.green {
  color: #e8f0de !important;
  border: solid 1px #538312;
  background: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
  background: #538018;
  background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
  background: -moz-linear-gradient(top, #6b9d28, #436b0c);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
  color: #a9c08c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
  background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

<div>
  <form action="dosomething.htm" method="post">
    <input type="submit" class="button blue" value="Option 1" />
    <a href="#" class="button green" onclick="callafunction()">Option 2</a>
  </form>
</div>

CSS优先级问题

1 个答案: