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"></script>
    <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 in header:

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

does NOT fix it.

回答1:

Had the same problem and found a solution (although my solution was for a:hover not an li:hover and I've not tested)

Basically, make sure element 'has-layout'. For example, display:block, etc. Then reset transparency for that element. -ms-filter: "";

回答2:

just got the perfect working combination:

display: block;
zoom: 1;
opacity:0.4; /*for ie9 and other browsers */
filter: alpha(opacity=40); /*for ie older browsers*/

As Bob sayed the 'has-layout' is essential for it to work in ie 8. Here the 'display: block;' does the job.

回答3:

More CSS cargo-cult for me! I have no idea, but focing IE8 into IE7 mode fixed the problem. I was wrong about it not working in the question. Still good in other browsers too.

来源：https://stackoverflow.com/questions/3576568/ie-opacity-hover-sometimes

标签

css

internet-explorer

opacity