Question

When using the pseudo selector :hover, the color changes (note big big style sheet, it is not however been overwritten); but when I apply it to the anchor tag itself it does not apply.

CSS:

#testimonialContent {
    width:640px;
    position: relative;
    height: auto;
    padding-top: 15px;
    font-size: 18px;
    font-family: Gotham-Book, Arial;
    color: #4d4d4f;
    *padding-top: 0;
}
#testimonialContent span {
    width: 600px;
    letter-spacing: -1px;
    letter-spacing: 0px\9;
    float: right;
    margin-top: -3px;
    *margin-top: -30px;

}

#testimonialContent span strong {
    position: relative;
    letter-spacing: 0px;
    display: block;
    top: 8px;
    font-size: 14px;
}
#testimonialContent a{
    font-size: 12px;
    letter-spacing: 0px;
    position: relative;
    color: #86a53e;
    margin-top: -10px;
    float: right;   
}
#testimonialContent a:hover{
    color: red;
}

HTML:

<div id="testimonialContent">
    <br /><br /><br /><br /><br /><img id="quoteOne" src="http://www.qwertyuiop.co.uk/wp-content/themes/designworks2012/images/quote1.png">
    <span><?php
        query_posts(array(
            'cat' => 39,
            'order' => 'ASC', // ASCEND
            'orderby' => 'rand',
            'showposts' => 1,
            ));
        $wp_query->is_archive = true; $wp_query->is_home = false;
        if (have_posts()) : while (have_posts()) : the_post();
        the_content();
        endwhile; endif;


    ?>
    <a href="#" id="nextQ">NEXT QUOTE</a>
    </span>
    <script>
        var str = $('#testimonialContent').html();
        var x = str.replace("<p>","");
        $('#testimonialContent').html(x);
        var x = str.replace("</p>","");
        $('#testimonialContent').html(x);
    </script>
</div> <!-- end testimonialContent -->

As I say, it is not being overwritten somewhere down the stylesheet. (placed it at the bottom).

EDIT:

I have a link, this link is displaying black however the css color: #86a53e; should target it. It does not. However the pseudo selector is targeting the anchor whereas the normal anchor is not. It will hover red but display black. It should not be black.

Answer 1

That’s because you’re aplyying the exact same color that It had before the :hover:

#testimonialContent a{
...
color: #86a53e;
...
}

#testimonialContent a:hover{
**color: #86a53e;**
}

If you change the second, you’ll notice the behaviour you want.