Question

我有一个显示为＆＃34; X＆＃34; （用于关闭窗口）：

<div class="alertwrapper" style="display:inline-block;">
<div class="obj"></div> 
<div class="x"></div>   //<-----ELEMENT IN QUESTION
</div>

以下是此元素的CSS属性：

.x {
    display: none !important;
   position: absolute !important;
left:0;
top:0;
    transition: transform .25s ease-in-out;
    z-index:999;
}

.x:before {
    content: "";
    position: absolute;
    //Here, I've also tried display:none !important;
    left: 48%;
    margin-left:-495px;
    right: 0;
    top: 115px;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 3px solid black;
    transform: rotate(45deg);
    transform-origin: center;
    z-index:999;
}
.x:after {
    content: "";
    position: absolute;
    //Here, I've also tried display:none !important;
    left: 48%;
    margin-left:-495px;
    right: 0;
    top: 115px;
    bottom: 0;
    width: 32px;
    height: 0;
    border-top: 3px solid black;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index:999;
}

在点击另一个元素之前不应显示此div，此时它应该出现，如下面的代码所定义：

<script type="text/javascript">
$(document).ready(function () {
$('body').on('click', '.ActiveQuestionCycler', function() {
             $("div.x").fadeIn(300).delay(1500);
             $("div.obj").fadeIn(300).delay(1500);
    });
});
</script>

当页面加载时，div＆＃34; x＆＃34;在点击.ActiveQuestionCycler之前可见。（显示不设置为none。）我认为这与伪类before和after重叠，但我无法弄清楚原因。

（div.obj在点击.ActiveQuestionCycler时淡入淡出。）

源中没有错误警报。

Answer 1

第109行的此评论/// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON无效。将其更改为：

/* STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON */

它应该有效。请务必将display: none;放入.x

所以它看起来像：

.x {
    display: none;
    /* your other styles */
}

虽然// comment对于大多数编程语言来说都是正常的，但是常规css不接受它，而css注释就像这样/* comment */

为什么我的伪类重写display：none？

1 个答案: