html - 检查了 div 中的输入 radio 启动颜色转换(仅 css)

Question

所以，这是交易..我有一个简单的 radio 和一个隐藏的 div

<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
</div>

使用 CSS:

.some-class{
 position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;        
    display:none;
    background: white;
    opacity: 0.7;
    -webkit-transition: all 1s linear;
       -moz-transition: all 1s linear;
        -ms-transition: all 1s linear;
         -o-transition: all 1s linear;
            transition: all 1s linear;
}
 #radio-id:checked ~ .some-class{
    display: block;
    background: rgb( 40, 44, 47 );
} 

这里的问题是，当检查 radio 时，根本没有转换。新背景出现Div，但不流畅。

Answer 1

用以下内容替换css

#radio-id:checked ~ .some-class {
   display: block;
   background: rgb( 40, 44, 47 );
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: 0.7;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}