CSS不透明度不会过渡

时间:2016-10-12 23:53:28

标签: html css css3 css-transitions

这一转变昨天在Windows 7笔记本电脑上运行。

我已经移动到我的电脑,它已不再转换,我已经在Opera,Firefox,Chrome,Chrome canary,Internet Explorer(11)和Edge中尝试了该页面。

在测试的6个浏览器中 - Firefox和IE 11成功转换,我对此为何非常困惑。



        <table id="tblLabTests" class="fullWidth dataEntryTableTop" runat="server" visible="false" clientidmode="Static">
            <tr id="trL_FBC" clientidmode="static">
                <td>
                    <asp:CheckBox ID="chkL_FBC" runat="server" clientidmode="static" />
                    <asp:Label AssociatedControlID="chkL_FBC" ID="lblL_FBC" runat="server" Text="FBC" />
                </td>
                <td>
                    <div id="divFBC" runat="server" clientidmode="static">
                        <table id="tblFBC" class="fullWidth noBorder" runat="server" clientidmode="static">
                            <tr>
                                <td>
                                    <asp:Label ID="lblPlateletCount" runat="server" Text="Platelet Count" />
                                </td>
                                <td>
                                    <asp:TextBox ID="txtPlateletCount" runat="server" MaxLength="4" CssClass="width50" />                                        
                                    <asp:Label ID="Label10" runat="server">*10<sup>9</sup>/L</asp:Label><br />
                                    <asp:CompareValidator ClientIDMode="Static" CssClass="cvRed" runat="server" id="CompareValidator1" ControlToValidate="txtPlateletCount" Type="Double" ErrorMessage="Must be a number" Display="Dynamic" Operator="DataTypeCheck" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>


        function fbcUpdate() {
            var checked = $('#chkL_FBC').is(':checked');
            if (checked) {
                $('#divFBC').css('display', '');
            }
            else {
                $('#divFBC').css('display', 'none');
            }
        }
&#13;
#con {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.3);
    width: 150px;
    height: 150px;
    position: fixed; /* was absolute of now non existing parent */
    top: 75px;
    left: 30px;
    z-index: 1;
    box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.4);
    overflow: hidden;
}
.class {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    opacity: 0;
    background-color: rgba(0,0,0,0.8);
    text-align: center;
    font-size: 14px;
    transition: opacity 0.3s ease 0.3s;
}
.class:hover { opacity: 1; }
&#13;
&#13;
&#13;

造成这种情况的原因是什么?为什么它有效?

  • 我很惊讶即使在抽象代码之后我也能重新创建它。

编辑:这是非常奇怪...在片段编辑器中它不起作用 - 就像在我的网站上一样。

但是,在此页面上预览时,它可以正常工作 - 与其他人一样。

0 个答案:

没有答案