我有一段代码不能正常工作。 我的页面上有一个 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&color_scheme=light&header=false&height=580&href=https%3A%2F%2Fwww.facebook.com%2FDansvanopstal&locale=nl_NL&sdk=joey&show_border=false&show_faces=true&stream=true&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&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&color_scheme=light&header=false&height=580&href=https%3A%2F%2Fwww.facebook.com%2FDansvanopstal&locale=nl_NL&sdk=joey&show_border=false&show_faces=true&stream=true&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
最佳答案
Internet Explorer 的不透明度设置:
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
关于css - IE 中的 Facebook Like Box 不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21079663/