Question

有两个div 我打算对div进行悬停效果。如果我将鼠标悬停在div2上，它会改变其不透明度并显示一些文本（此处我使用：after）。但即使没有悬停，里面的内容：之后无法显示，为什么？

HTML：

<body>
<section>
<div id='i1'>
    <div id = 'i2'>

    </div>
</div>
</section>
</body>

的CSS：

#i1{
    height:200px;
    width:200px;
    position: relative;
    background-color: rgba(26, 188, 156,1.0);
}
#i2{
    height: 200px;
    width:200px;
    position: absolute;
    top:0;
    left:0;
    background-color: black;
    opacity: 0.6;
    transition:opacity 0.5s linear;
 }
#i2:hover{
    opacity: 0;
}
#i2:after{
    content:"hi";
    display: block;
    margin:100px;
    width:100px;
 }

＆＃34; hi＆＃34;没有显示，为什么：以后没有工作??

更新：对不起我的粗心，它确实显示，只是相同的颜色。它是一个简化版本，实际问题就在这里。看到它：评论中的js小提琴链接。

：伪元素后没有工作

0 个答案: