IE opacity :hover sometimes?

I am having a very odd opacity/hover problem in IE. Everything works in FF and Chrome.

Consider this page:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        $(document).ready(function() {
            $("#outer").css("opacity", .7);
        });
    </script>
    <style type="text/css">
        #outer
        {
            position: absolute;
            width:600px;
            background: #111;
            z-index:2;
            overflow: hidden;
        }
        #outer div
        {
            float: left;
        }
        ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul li 
        {
            width: auto;
            margin: 2px 4px 2px 4px;
            padding: 2px 4px 2px 4px;
            font-size: 11px;
            color: White;
        }
        ul li:hover
        {
            background: red;
            font-weight: 600;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="one">
            <ul>
                <li>111</li>
                <li>222</li>
            </ul>
        </div>
        <div id="two">
            <ul>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
        <div id="three">
            <ul>
                <li>555</li>
                <li>666</li>
            </ul>
        </div>
    </div>
</body>
</html>

Here's the problem. The mouse-over is intermittent - you may or may not see a red background and font change in IE (7 or 8). You will always see the cursor change. If I take the background and font-weight out, I still see the cursor change. But if either the background or the font-weight are there, The cursor will still change but the background or font may or may not.

If the opacity is NOT set on #outer, everything works everywhere. Again, FF and Chrome are fine.

What do you think?

UPDATE: This semes to be restricted to IE8. When IE8 is in compatability mode (acting like IE7) all is well!

But, including this tag:

meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />

does NOT fix it.

ansaurus

tags:

views:

answers:

IE opacity :hover sometimes?

related questions