有CSS的电灯泡按钮

Question

我正在尝试创建灯泡按钮,并得到以下解决方案,一些类似于我的需要,但其CSS非常复杂,它也需要复杂的JavaScript.是不是有办法创建一个像小尺寸的简单的灯泡按钮W: 50px, H:50px.这引起了on点击次数和关上单击(切换).我们不能简单地在字形图标或令人敬畏的字体图标上执行此操作吗？

http://cssdeck.com/labs/light-bulb

Answer 1

看看我为你做的这个例子.

想到的第一个具有自己的可切换状态的元素是一个复选框.您可以利用其:checked伪选择器根据复选框的状态更改样式.

由于您无法将背景图像添加到复选框本身,因此我使用了一个label元素,该元素将在单击时切换复选框的状态.为了根据复选框的状态对标签进行不同的样式设置,我使用了相邻的选择器(+)来为复选框后面的单个标签创建规则.

编辑:我更新了示例以修复Chrome对图像MIME类型的抱怨.

E2:虽然它超出了你的问题的范围,如果你希望在点击发生时运行一些JavaScript,你可以做类似的事情:

bulb.onclick = function(ev) {
    if (this.checked) {
        console.log('the lightbulb is now on');
    } else {
        console.log('the lightbulb is now off');
    }
};

在这里示范.

E3:如评论中所述,预加载"on"图像可能是个好主意.

• 您可以使用数据URI ^{[1] [2]}将图像"嵌入"到CSS中,就像这样.虽然,这种方法可能会慢一些.

• 您可以使用图像精灵来保存您需要的所有图标,点击后,更改background-position,就像这样.

E4:这是一种在不使用复选框的情况下完成灯泡切换的方法.

E5:这是使用FontAwesome的示例.但是,FontAwesome不包含点亮灯泡的图标,所以我只是改变了文本的颜色(看起来不太好).使用JavaScript,我改变color了元素style对象的属性.您可以改为切换CSS类或将其与复选框示例结合使用.

E6:以下是将FontAwesome与复选框示例结合使用的示例.

E7:这是一个有趣的例子,利用CSS3过渡来缓解两者之间color的关系.