0

我有一个容器div，其中包含使用andinput type="checkbox"添加的伪元素。::before::after

function hiding() {
    var child = document.getElementById("child");
    child.style.visibility = "hidden";
}
var hide = document.getElementById("hide");
hide.addEventListener("click", hiding);

function showing() {
    var child = document.getElementById("child");
    child.style.visibility = "visible";
}
var show = document.getElementById("show");
show.addEventListener("click", showing);
div {
    padding: 10px;
    border: 2px solid black;
    background-color: green;
}
div div {
    position: relative;
    top: 50px;
    background-color: white;
}
#parent {
    height: 150px;
}
#child {
    visibility: visible;
}
input[type=checkbox].toggle_switch::after {
    content:'';
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    border: 1px solid #919191;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 #f0f0f0;
    -webkit-transition: 1s all linear;
}
input[type=checkbox].toggle_switch::before {
    content:'OFF';
    margin: 0;
    padding: 0;
    width: 38px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 18px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font: 700 14px sans-serif;
    line-height: 22px;
    color: #7f7f7f;
    text-shadow: none;
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
    border-color: #7d7d7d;
}
input[type=checkbox].toggle_switch {
    -webkit-appearance: none;
    padding: 0;
    width: 58px;
    height: 22px;
    position: relative;
    border-radius: 3px 0 0 3px;
    -webkit-transition: 1s all linear;
    vertical-align: text-top;
}
input[type=checkbox].toggle_switch:checked::after {
    left: 36px;
}
input[type=checkbox].toggle_switch:checked::before {
    content:'ON';
    left: 0px;
    color: #fff;
    text-shadow: 0 -1px 0 #1b3b6f;
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    box-shadow: inset 0 2px 2px #2a5bb3, inset -3px 0 3px #2a5bb3;
    border-color: #1654b5;
}
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
<div id="parent">
    <div id="child">
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" />
        <input type="checkbox" class="toggle_switch" checked/>
        <input type="checkbox" class="toggle_switch" />
    </div>
</div>

JSFiddle 示例注意：目前仅针对 webkit 编写。

使用 JavaScript 将容器元素的 CSS 可见性属性从“可见”更改为“隐藏”。这似乎只发生在从“可见”到“隐藏”时，反之亦然。

伪元素在消失之前保持可见片刻。

切换可见性时是否可以防止伪元素挥之不去？

PS：如果你能告诉我如何让它在 IE 和 Firefox 中工作，你将赢得我永远的感激（我知道我在示例中只有 webkit 标签，但我需要做的就是修复它吗？）

4

0 回答 0