Html 按钮手风琴（CSS）

我目前正在进行一个小组项目，使用Graphhopper提供的API创建一个开源路线规划器

与大多数地图API一样，我们在左侧有一个输入面板（请参见Google Maps/Graph Hopper），我们目前在顶部有一个面板，允许用户更改他们使用的车辆类型（即汽车/卡车/步行）在导航栏上，我们必须有一个设置按钮，它可以创建一个下拉列表，其中包括可以确定的更多首选项

我正在努力创建CSS，当按钮悬停在上面时，手风琴就会打开，用户的首选项就会显示出来，一旦它被移开，它就会再次隐藏

以下是我当前用于面板的html：

<div id="options">
                <div id="vehicles"></div>
                <div id="preferences">
                    <button title="Settings" id="settings-btn">
                        <img src="img/settings.png" alt="Settings">
                    </button>
                    <form>
                        <table>
                            <tr>
                                <th>Traffic Signals</th>
                            </tr>
                            <tr> <!--center table rows in css!-->
                                <td>
                                    Avoid <input type="range" name="signals" min="0" max="3" value ="3"> Permit
                                </td>
                            </tr>
                            <tr>
                                <th>Road Preference</th>
                            </tr>   
                            <tr>
                                <td>
                                    <input type="radio" name="road-type" value="0" checked>Default
                                    <input type="radio" name="road-type" value="1">Main
                                    <input type="radio" name="road-type" value="2">Residential
                                </td>
                            </tr>
                            <tr>
                                <th>Motorway Preference</th>
                            </tr>
                            <tr> 
                                <td>
                                    <input type="radio" name="motorways" value="0" checked>Default
                                    <input type="radio" name="motorways" value="1">Avoid
                                    <input type="radio" name="motorways" value="2">Prefer
                                </td>
                            </tr>
                        </table>
                    <!--
                    - Traffic Signals now operate between 0 and 3 (4 variations)
                        The default value is 3, permitting traffic lights
                        2 is weak avoidance
                        1 is medium avoidance
                        0 is strong avoidance

                    - Road Preference (Default: 0, Main:1 Residential:2 )

                    - Motorway Preference (Default: 0, Avoid: 1 Prefer: 2)

                    Then add an extra button to choose (or get) shortest way
                    Note: If user choose shortest way, it will ignore other factors(traffic Signals, main road, motorway)
                    -->
                </form>
                </div>
            </div>

基本上，我要做的就是使用：将鼠标悬停在设置btn上，而不是悬停在选项上，将更改应用于选项。

如果

#settings btn

在

#options

之外，您可以执行类似操作：

#settings-btn:hover + #options{
height: 225px;
}

但实际上你不能，因为你的按钮在你想要扩大的东西里面

Js可以完成这项工作，但是如果你想在非纯css的情况下完成这项工作，你必须改变你的html

也许你也可以，做一些技巧： 但我建议您更改html结构

---

对不起，我的英语不好

你能做一个JSFIDLE吗？你能使用jQuery吗？我宁愿把它变成纯粹的css，我可以提出一个JSFIDLE问题，因为它没有多大意义，因为很多网站都是使用Javascript生成的。看一看graphhopper的地图，感受一下它的样子。在显示车辆类型的位置，我需要另一个选项，该选项将进一步打开哪些附加首选项。请尝试使用

：focus

或

：active

伪选项，但仍需要单击。

#settings-btn:hover + #options{
height: 225px;
}