CODEWITHSUNDEEP
cssinternet-explorer-8opacity
psx
psx

Reputation: 4048

filter:alpha breaks :hover in IE?

When using 

filter:alpha(opacity=60);

on a div containing an unordered list which has :hover on the list items, IE8 will only activate the :hover event on the first item that is hovered over.

Moving up/down to another list item will no longer activate the :hover event. This works in firefox however.

There is an example at http://www.ithinkimlost.com/paul/ese/test.html

Any ideas what would be causing this?

Upvotes: 0

Views: 2334

Answers (3)

Lua
Lua

Reputation: 1

Change this:

#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;    
}

Upvotes: 0

nlac
nlac

Reputation: 11

try this sheet:

#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;
}

Upvotes: 1

Knu
Knu

Reputation: 15134

Try this syntax:

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

Some ideas that might fix it:

  • reset the opacity on the :hover
  • set an height on the lis
  • add a position and remove the clear
  • move #homeOptions above the :hover in the code

Upvotes: 1

Related Questions