疑似セレクター :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;
はそれをターゲットにする必要があります。そうではありません。ただし、疑似セレクターはアンカーをターゲットにしていますが、通常のアンカーはそうではありません。赤くホバーしますが、黒く表示されます。黒であってはなりません。