Question

任何人都可以帮助我...下面是我的问题的一个简单例子：

<html>
<head>
    <meta charset="utf-8" />
<title>Test</title>
<style>
    #layer1 {
        opacity: 1;
        -webkit-transition: all ease 1s;
    }
    #layer2 {
        opacity: 0;
        -webkit-transition: all ease 1s;
    }
    #on:checked + label + input + #layer1 {
        opacity: 1;
    }
    #on:checked + label + input + div + #layer2 {
        opacity: 0;
    }
    #off:checked + #layer1 {
        opacity: 0;
    }
    #off:checked + #layer1 + #layer2 {
        opacity: 1;
    }
</style>
</head>
<body>
    <label for"on">ON</label>
    <input checked type="radio" id="on" name="switch" />
    <label for"off">OFF</label>
    <input type="radio" id="off" name="switch" />
    <div id="layer1">This is layer1</div>
    <div id="layer2">This is layer2</div>
</body>
</html>

所以基本上我正在创建一个没有javascript的淡入淡出开关效果。这种过渡效果适用于FF，IE，Chrome，Opera，但不适用于Safari（我的版本是5.1.7）。我知道不同的前缀（-moz，-ms ...，但它不会改变任何东西）。有人可以帮忙吗？感谢。

CSS单选按钮转换不仅适用于Safari

0 个答案: