Question

my html

<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">

that’s the order I call in the style sheets

.btn
{
    border-top-right-radius:10px;
    -webkit-top-right-radius:10px;
    margin-right:20px;
    display:block;
    text-align:center;
    float:right;
    color:#ffffff;
    background-color:#000000;
    font-size:15px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    cursor:pointer;
    width:150px;
    height:30px;
    box-shadow:5px 3px 3px #888888;
    -moz-box-shadow:5px 3px 3px #888888;
    -webkit-box-shadow:5px 3px 3px #888888;
    -o-box-shadow:5px 3px 3px #888888;
}

.over_contact
{
    color:#00a8ff;
}

.over_resume
{
    color:#9848c2;
} 

.over_portfolio
{
    color::#f0ff00;
}

.over_rates
{
    color:#00A000;
}

here’s a working example http://www.dsi-usa.com/yazaki_port/hair-by-steph/

the problem is that when i hover over the portfolio button it doesn’t show the over class. I was looking at it w/ the chrome debugger and I noticed that the class is getting added and deleted fine, the only problem is that when I look at the structure of the CSS the main .btn class color is overriding the over_portfolio class color change. It doesn’t do that with the other ones, and I’m not quite exactly sure what I’m missing here.

Answer 1

You have a syntax error in your rule for .over_portfolio, it should be:

.over_portfolio
{
  color:#f0ff00;
}

I’ve removed the extra : you had in there