CSS Precedence Issue

Question

I have in my style.css the rule which applies to entire web site:

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

I have also in my 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');
}

In my html page I have declared style.css before the button.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" />

The code is:

<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>

The blue button (Option 1) has no problem with hovering because it is not an anchor. However the green button (Option 2) when hover over "Option 2" it is turning to the color of a:hover which is #E35B00 orange color instead of #538018; green color!

On the Firefox developer Rules console I am seeing the a:hover is below the green:hover. Why is this the case? I tried rearranging the order of the css but it's no use. The a:hover takes over the green:hover. This is driving me nuts. Your help is appreciated. Thanks in advance.

Answer 1

You never specify what color you want the text to be when you hover on the .green button, so it defaults to a:hover. To fix this, you just have to add in the color of what the .green button to the CSS .green:hover rule.

The whole .green:hover CSS rule should look like this.

.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>

---

Another option is to put !important after color: #e8f0de in the .green CSS rule. !important makes a property take precedence no matter what.

If you want to do this, then the first line of the .green rule should be.

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>