过滤器：alpha 中断：在 IE 中悬停？答案

【问题标题】：filter:alpha breaks :hover in IE?过滤器：alpha 中断：在 IE 中悬停？
【发布时间】：2011-05-25 19:19:16
【问题描述】：

使用时

filter:alpha(opacity=60);

在包含无序列表的 div 上，该列表具有 :hover 在列表项上，IE8 只会在悬停的第一个项目上激活 :hover 事件。

向上/向下移动到另一个列表项将不再激活 :hover 事件。但是，这在 Firefox 中有效。

http://www.ithinkimlost.com/paul/ese/test.html有一个例子

有什么想法会导致这种情况吗？

【问题讨论】：

标签： css internet-explorer-8 opacity

【解决方案1】：

试试这个语法：

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

一些可能解决它的想法：

重置:hover的不透明度
在lis 上设置高度
添加position 并删除clear
将#homeOptions移到代码中:hover的上方

【讨论】：

感谢您的建议，但不幸的是，它们都没有奏效。我使用 jQuery .hover() 来实现我想要的。
我认为你应该在锚点上使用:hover而不是lis（当然记得设置display:inline-block来触发hasLayout）

【解决方案2】：

改变这个：

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

【讨论】：

【解决方案3】：

试试这张表：

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

【讨论】：