CSS hover properties not available in jQuery hover event under IE8

CSS hover properties not available in jQuery hover event under IE8

With the following html:

  1. <!DOCTYPE HTML>
  2. <html xml:lang="en-US" lang="en-US" dir="ltr">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.     <title>Test</title>
  6.     <script TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function() {
  9.             $("a").hover(
  10.                 function() {
  11.                     var spn = $(this).children("span");
  12.                     spn.html(spn.html() + "<br />My width is " + $(this).outerWidth());
  13.                 },
  14.                 function() { }
  15.             );
  16.         });
  17.     </script>
  18. <style type="text/css">
  19. a span { display:none; }
  20. a:hover span { display:block; position: relative; width: 100px; }
  21. </style>
  22. </head>
  23. <body>
  24. <a href="#">a link <span>Some descriptions</span></a>
  25. </body>
  26. </html>

Under Firefox, the a:hover  width property is correctly returned inside the jQuery hover event.

While under IE8, the a:hover width property is not available inside the jQuery hover event.

Why is this? This inconsistency is really annoying.