html - ::在内容悬停之前没有平滑过渡

问题描述

我有输入，我隐藏并使用 :before 内容将其替换为图像。当我们单击输入时，图像将变为较暗的图像（我这样做是因为我不确定是否可以在 png 图像上添加不透明度）。

它可以工作，但是，图像似乎在点击之间无法顺利加载。有奇怪的闪光或过渡不平滑，我检查输入后，白色闪光消失了。有没有办法解决这个问题或解决它？

label{
    font-size: 18px;
    color: #bfd5e9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-main-wrap{
    display: flex;
    justify-content: space-evenly;
    margin: 40px 0;
}

.block-child-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-label{
    flex-direction: column;
}

.block-input{
    position: relative;
    z-index: -1;
}

.block-icon-1 + label:before {
    display: flex;
    transition-duration: 0.3s;
    padding: 6px 2px;
    margin-bottom: 15px;
    display: inline-block;
}

.block-icon-1:checked + label:before {
    content: 
}

.block-icon-2 + label:before {
    display: flex;
    transition-duration: 0.3s;
    content: 
    padding: 6px 2px;
    margin-bottom: 15px;
    display: inline-block;
}

.block-icon-2:checked + label:before {
content: 
}

.block-icon-3 + label:before {
    display: flex;
    transition-duration: 0.3s;
    content: 
    padding: 6px 2px;
    margin-bottom: 15px;
    display: inline-block;
}

.block-icon-3:checked + label:before {
content: 
}

<div class="block-main-wrap">
            <div class="block-child-wrap">
                <input class="block-input block-icon-1 activatenext" type="radio" id="male" name="GENDER" value="Male">
                <label class="block-label" for="male">test-1</label><br>
            </div>
            <div class="block-child-wrap">
                <input class="block-input block-icon-2 activatenext" type="radio" id="nonbinary" name="GENDER" value="Non-Binary">
                <label class="block-label" for="nonbinary">test-2</label><br>
            </div>
            <div class="block-child-wrap">
                <input class="block-input block-icon-3 activatenext" type="radio" id="female" name="GENDER" value="Female">
                <label class="block-label" for="female">test-3</label><br>
            </div>
</div

标签： htmlcsscss-selectors

html - ::在内容悬停之前没有平滑过渡

问题描述

解决方案

推荐阅读