| 纯html+css中实现静态选座位效果技巧（input+label使用小技巧） | 您所在的位置：网站首页 › word座位图中间加个过道怎么做 › 纯html+css中实现静态选座位效果技巧（input+label使用小技巧） |
纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
|
很多时候，我们想通过html+css的方式实现排列在后方的代码在选中状态下，能控制排列在前的代码的样式。那么要怎么实现呢？在这里我就要用1个小技巧来完成。 众所周知的，我们css中的选择器通常只能向下或者同级向下选中，而不能向上选中，这样就对于想控制前面样式的时候带来麻烦。input+label关联的方式即可实现，因为input和label是通过id值来进行关联的，而html中规定了，id值必须唯一，那么我将input放置在html的body下的任意位置，均可实现关联，所以为了实现后方代码控制前方代码，只需要将input放置到前方的代码之前就ok了。 下面我们举一个例子：我要实现电影院选座的时候，点击下方的1人，即选中1个座位，点击2人 即选中2个座位的效果。
在这里我选择单选框（input的type类型为radio）。 同时将input的代码放置到main标签下的最开始地方，而label可以放置在后面任意位置，都可以通过id进行关联。这样我在点击‘1人’等按钮的时候，即可选中所需座位。 html代码如下： 激光3号厅银幕 ......银幕中央 
推荐 1人 2人 3人 4人 5人 css代码如下： main input{ display: none; } input[id="people1"]:checked~section label[for="seat7_07"]>i{ background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png"); } input[id="people2"]:checked~section label[for="seat7_07"]>i, input[id="people2"]:checked~section label[for="seat7_08"]>i { background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png"); } input[id="people3"]:checked~section label[for="seat7_07"]>i, input[id="people3"]:checked~section label[for="seat7_08"]>i, input[id="people3"]:checked~section label[for="seat7_09"]>i { background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png"); } input[id="people4"]:checked~section label[for="seat7_07"]>i, input[id="people4"]:checked~section label[for="seat7_08"]>i, input[id="people4"]:checked~section label[for="seat7_09"]>i, input[id="people4"]:checked~section label[for="seat7_06"]>i { background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png"); } input[id="people5"]:checked~section label[for="seat7_07"]>i, input[id="people5"]:checked~section label[for="seat7_08"]>i, input[id="people5"]:checked~section label[for="seat7_09"]>i, input[id="people5"]:checked~section label[for="seat7_06"]>i, input[id="people5"]:checked~section label[for="seat7_05"]>i { background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png"); }
|
【本文地址】
公司简介
联系我们