Table text hover and link color

Question

I have html table and layout for it (something like that, also i use haml+sass):

.zebra{
 .zebra-stripe{
  &.zebra1{
  a{
    color: red;
  }
  a:hover{
    color: blue;
  }
 }
}

my htm table has class zebra, and tr has class .zebra-stripe .zebra1

but there i have link with other style (like button) and this link has own height with background, but color is setted to orange on hover,

.details-link{
  width: 70px;
  margin: 2px;
}
.details-link:hover{
  color: orange;
}

but when my mouse is over this link it's color is not orange, but blue as setted for table.... what is wrong?

How to set link hover text color to orange (i setted it, but it is not viewing properly)....

If something is not clear write me in comments...

Answer 1

You problem is the specificity of the selectors you're using, .zebra .zebra-stripe.zebra1 a:hover is more specific than .details-link:hover. Try the following instead to make your selector more specific:

.zebra .zebra-stripe.zebra1 a.details-link:hover {
    color: orange;
}

Answer 2

Try out this:

a.details-link:hover{
    color: orange;
}