I am making a footer and I wanted it to be a dark grey by default, then lighten up when you hover over it and then have the individual link lighten up even more when you hover over one in the footer. 

I made a JSFiddle to show what I mean with my code: <https://jsfiddle.net/v1rxk09x/>

You can see better in the JSFiddle, but I think I screwed up with my CSS somewhere:

```
div.footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    padding-left: 10px;

}

div.foottext {
    font-family: 'Queen of Camelot', sans-serif;
    color: #757575;
    position: absolute;
    bottom: 0;
    text-align: center;
    transition:0.3s;
}

div.foottext:hover {
    color: #cccccc;
    transition:0.3s;
}

div.foottext a:link
{
    text-decoration: none;
    color: #inherit;
    transition:0.3s;
}

div.foottext a:visited
{
    color: inherit;
    text-decoration: none;
}

div.foottext a:hover
{
    color: #ffffff;
    transition:0.3s;
    text-decoration: none;
}

```

It works, but the links changing colour is delayed and I'm not sure why, you can see when you hover over 'Navigation' that it all fades to a light grey perfectly, apart from the links, which transition a bit later.

Thanks for any advice!