-1

使用伪选择器 :hover 时，颜色会发生变化（注意大样式表，但它不会被覆盖）；但是当我将它应用于锚标签本身时，它并不适用。

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

正如我所说，它不会在样式表的某个地方被覆盖。（放在底部）。

编辑：

我有一个链接，这个链接显示为黑色，但是 csscolor: #86a53e;应该以它为目标。它不是。然而，伪选择器的目标是锚点，而普通的锚点不是。它将悬停在红色上，但显示为黑色。它不应该是黑色的。

4

1 回答 1

1

那是因为您正在应用与它之前完全相同的颜色：悬停：

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

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

如果你改变第二个，你会注意到你想要的行为。

于 2012-11-05T11:16:33.097 回答