1

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

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

4

1 回答 1

9

看看我为你制作的这个例子。

想到的第一个具有自己可切换状态的元素是复选框。您可以利用其: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 过渡来缓解两个colors 之间的关系。

于 2013-10-12T20:14:51.737 回答