使用伪选择器 :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;
应该以它为目标。它不是。然而,伪选择器的目标是锚点,而普通的锚点不是。它将悬停在红色上,但显示为黑色。它不应该是黑色的。