Question

我有一段代码无法正常工作。我的页面上有一个Facebook小部件，其不透明度为0.5。当您将鼠标悬停在它上面时，它会变得不透明：1。在Chrome，Firefox等中，一切正常。但在IE中，悬停不会做任何事情。窗口小部件保持0.5不透明度，而不是更改为1.

我希望有人可以告诉我为什么它不起作用，也许如何让它在所有浏览器中运行。

<div class="art-layout-cell layout-item-1" style="width: 33%">
    <div class="art-widget widget widget_text" id="text-2">
        <div class="art-widget-content">
            <div class="textwidget">
                <div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/Dansvanopstal" data-width="310" data-height="580" height="580" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=230469016992855&amp;color_scheme=light&amp;header=false&amp;height=580&amp;href=https%3A%2F%2Fwww.facebook.com%2FDansvanopstal&amp;locale=nl_NL&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=true&amp;width=310"><span style="vertical-align: bottom; width: 310px; height: 580px;"><iframe name="f11894a138" width="310px" height="580px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=230469016992855&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D28%23cb%3Df2d771f9b4%26domain%3Dwww.mijncreaties.com%26origin%3Dhttp%253A%252F%252Fwww.mijncreaties.com%252Ff1d810dd4%26relation%3Dparent.parent&amp;color_scheme=light&amp;header=false&amp;height=580&amp;href=https%3A%2F%2Fwww.facebook.com%2FDansvanopstal&amp;locale=nl_NL&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=true&amp;width=310" style="border: none; visibility: visible; width: 310px; height: 580px;" class=""></iframe></span></div>
            </div>
        </div>
    </div>
</div>

CSS是：

.layout-item-1{
    opacity: 0.5;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
}
.layout-item-1:hover{
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
}

简而言之：当您在Chrome，Firefox等页面中访问该页面时，Facebook小部件显示0.5不透明度，但当您将鼠标悬停在其上时，它会变为1个不透明度（使其完全可见）。但是当您在IE中访问该页面时，Facebook小部件显示0.5不透明度，当您将鼠标悬停在它上面时没有任何反应。它只剩0.5。它应该改为1.

当您将鼠标悬停在Facebook DIV旁边时，在边缘（第一个DIV边缘和Facebook DIV之间的5个像素）上，它确实有效。

请参阅页面底部的http://bit.ly/1lMOcMu

Answer 1

Internet Explorer的不透明度设置：

/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

Facebook喜欢IE中的盒子不透明度

1 个答案: