为什么我的伪类重写显示：无？

我有显示为“X”一个div（用于关闭窗口）：为什么我的伪类重写显示：无？

<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>

页面加载，但是，格“x”是可见的，在点击.ActiveQuestionCycler之前。（显示不是没有设置。）我认为这与伪类before和after重写了这一点，但我不明白为什么。

（div.obj被点击时.ActiveQuestionCycler DOES淡入。）

有在源没有错误警报。

来源

2017-09-07 Snoops

Snoops，是否有代码在任何地方的工作示例，如代码项目，codepen或jsfiddle？ – cwanjt

我会做一个简单的JSFiddle瞬间 – Snoops

为什么你有这么多的风格标签？我会将它们整合到一个样式表中 –

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

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

，它应该工作。记得那display: none;落入.x

所以它看起来像：

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

虽然// comment是正常的大多数编程语言，经常CSS不接受它，并CSS注释是这样的/* comment */

来源

2017-09-07 21:56:05

非常棒！从来没有看过 - 现在完美的作品。（我很惊讶它以前一直工作。） – Snoops

哈哈很高兴它成功了 –

不客气！ –

为什么我的伪类重写显示：无？

回答

相关问题