Question

我有一个食物菜单网站，每个食物条目的图像。它们实际上是复选框，标记为图像。当我点击任何菜单图像时，它会显示我使用CSS编码的自定义复选框。

除此之外，我希望在我的页面上显示更多文字，其中基本上指明了已检查的食物项目。因此，如果我选择玉米，我会想要＆＃34;玉米＆＃34;显示在我的html页面的另一部分。

此外，如果该项目未被选中，则该文本应隐藏。

我最好只使用CSS来做这件事，但如果不是，我可以使用一些javascript。

这就是我所拥有的。我感谢任何帮助。谢谢！

HTML代码

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label"><img src="images\cucumber.png"></label>

<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label"><img src="images\chickpea.png"></label>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label"><img src="images\corn.png"></label>

CSS代码

input[type=checkbox].css-checkbox {
                        position:absolute; z-index:-1000; left:-1000px; overflow:        hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
                    }

                    input[type=checkbox].css-checkbox + label.css-label {
                        padding-left:40px;
                        height:45px; 
                        display:inline-block;
                        line-height:45px;
                        background-repeat:no-repeat;
                        background-position: 0 0;
                        font-size:5px;
                        vertical-align:middle;
                        cursor:pointer;
                        margin-bottom:165px

                    }

                    input[type=checkbox].css-checkbox:checked + label.css-label {
                        background-position: 0 -45px;
                    }
                    label.css-label {
            background-image:url(http://localhost/images/csscheckbox_7cdb0340e1b30df1c5ec1b06aac0dca1.png);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

JSFIDDLE Example

Answer 1

在CSS中没有onClick这样的功能，你可以使用：hover或：active标签。（：活跃是你最接近的）

你也可以使用onClick =＆＃34;＆＃34; image标签内的属性可以切换一些javascript函数。

使用CSS单击图像时显示文本

1 个答案: