Question

我正在尝试创建灯泡按钮，并得到以下解决方案，一些类似于我的需要，但其CSS非常复杂，它也需要复杂的JavaScript。有没有办法创建像W: 50px, H:50px这样的小尺寸的简单灯泡按钮。单击时点击（{Toggle）时点击on。我们不能简单地在字形图标或真棒字体图标上进行吗？

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

Answer 1

查看我为您制作的this示例。

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

由于您无法向复选框本身添加背景图像，因此我使用了label元素，该元素将在单击时切换复选框的状态。要根据复选框的状态对标签进行不同的样式设置，我使用adjacent selector（+）为复选框后的单个标签创建规则。

修改：我更新了示例以修复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');
    }
};

示范here。

E3 ：正如评论中所述，预加载“on”图片可能是一个好主意。

您可以使用数据URI ^[1] ^[2]将图像“嵌入”到CSS中，例如{{3 }}。虽然，这种方法可能会慢一些。
您可以使用图片精灵来保存您需要的所有图标，点击后，更改background-position，例如this。

E4 ：this是一种在不使用复选框的情况下完成灯泡切换的方法。

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

E6 ：Here是将FontAwesome与复选框示例结合使用的示例。

E7 ：Here是一个有趣的示例，它利用CSS3过渡来缓解两个color之间。

有CSS的电灯泡按钮

1 个答案: