Filter: Alpha bricht: Hover in IE?

Question

Wenn

filter:alpha(opacity=60); 

auf einem div mit einer ungeordneten Liste enthält, die hat: schweben auf den Listenelementen werden IE8 nur aktivieren, die: Hover-Ereignis auf dem ersten Elemente, das über schwebte wird.

Wenn Sie auf ein anderes Listenelement nach oben/unten gehen, wird das Hover-Ereignis nicht mehr aktiviert. Dies funktioniert jedoch in Firefox.

Es gibt ein Beispiel an http://www.ithinkimlost.com/paul/ese/test.html

Irgendwelche Ideen, was dies verursacht werden würde?

Answer 1

Versuchen Sie, diese Syntax:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; 
filter: alpha(opacity=60); 
opacity: 0.60; 

einige Ideen, die es beheben könnte:

• die Opazität zurückgesetzt auf dem :hover
• eine Höhe auf der
s li gesetzt
• fügen Sie ein position und entferne die clear
• bewegen #homeOptions über dem :hover im Code

Answer 2

ändern diese:

#homeOptions ul li img { 
    vertical-align:middle; 
    margin-right: 20px; 
    filter:alpha(opacity=60); 
    opacity: 0.60; 
} 

#homeOptions { 
    background-color:#009; 
    height: 216px; 
    width: 300px; 
    float: left;  
} 

Answer 3

versuchen, dieses Blatt:

#homeContent { 
    margin-left: 15px; 
} 

#homeMainPic { 
    background:url(main_pic.jpg) no-repeat; 
    height: 216px; 
} 

#homeOptions { 
    height: 216px; 
    width: 300px; 
} 

#homeOptions ul { 
    height: 216px; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
} 


#homeOptions li { 
    display: block; 
    padding: 0 0 0 30px; 
    margin: 0; 
    vertical-align: middle; 
    text-align: left; 
    zoom:1; 

    background-color:#009; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; 
    filter:alpha(opacity=60); 
    opacity: 0.60; 

} 

/* it is needed - don't ask why */ 
#homeOptions li:hover { 
    background-color:#009; 
} 

#homeOptions a { 
    display: block; 
    width: 100%; 
    vertical-align: middle; 
    line-height: 72px; 
    height: 72px; 
    color: #fff; 
    text-decoration: none; 
    font-size: 1.1em; 

    border-bottom: 1px dashed white; 

    display: list-item; 
    list-style-type: disc; 
    list-style-position: inside; 

    padding-left: 30px; 
} 

#homeOptions a:hover { 
    background-color: #000; 
}