html5 block link styling issues
===

Hi HTML5 / css guru'es

I'm trying to make use of some "new" features presented by HTML5 however I have stumpled uppon a problem with changing my links background on hover when having block elements inside the <a> tag.

This is my test code: 

    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>teeeest</title>
    	<link rel="stylesheet" href="saninetto1/css/bootstrap.min.css" />
    	<style>
    		a:link  { background-color: red; }
    		a:hover { background-color: #333; color: red;}
    	</style>
    </head>
    
    <body>
    		<div><a href="#">I'm a block</a></div><br />
    		<a href="#2"><div>I'm a block 2</div></a>
    	</body>
    </html>

According to html5doctor ([article][1]) it should be straight forward but I just can't change the background on when hovering.

I made this fiddle to show the difference when using my test html: http://jsfiddle.net/vJEEn/

As the fiddle shows I can make changes to the text, but not the background-color

hope you can help me changing the background on hover


  [1]: http://html5doctor.com/block-level-links-in-html-5/