IE + CSS Hover Problems

At the beginning of the month I started a riddle blog at
https://accounts.google.com/ServiceLogin?service=blogger&passive=1209600&continue=
http://forums.xisto.com/no_longer_exists/=
http://forums.xisto.com/no_longer_exists/
. I customized everything and it worked fine until I checked how it looks in Internet Explorer.

Since the blog is about riddles, I had to find a simple way of hiding/showing solutions. I made a new CSS class called 'spoiler' and defined it in this way:

.spoiler a {  text-decoration: none;  color: #000;}.spoiler a:hover {  text-decoration: none;  color: #ad9;}

<div class="spoiler">
<a>
<span style="font-weight: bold; color: rgb(204, 204, 204);">Hover over this for the solution</span>
RIDDLE SOLUTION
</a>
</div>

As you can see, first a have a line that is visible (because the background is black) and another one which is not, as defined in '.spoiler a'. Since both "Hover over this" and the solution are in the same link, hovering over the text will show the solution (again because of the CSS). It all works fine in Firefox, but Internet Explorer doesn't show it. Is there any other way of doing this without using complicated scripts etc. Because I don't think Blogger allows JavaScript (which would be perfect).

The web site's address is http://braind.blogspot.de/