Question

我目前正在开发一个群组项目，使用Graphhopper提供的API创建一个开源路由规划器。

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

我正在努力创建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>

目前，我不知道怎么做，所以只是按钮悬停在显示屏上，但这里是css，当整个酒吧悬停在上面时，会显示设置：

#options {
background-color: #232323;
color: #FFFFFF;
float: left;
width: 285px;
overflow:hidden;
height: 32px;
transition: height 0.5s
}
#options:hover {
height: 225px;
}
#settings-btn {
width: 50px;
height: 32px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
background-color: #232323;
border-radius: 0px;
border-style: none;
outline:none;
float:right;
}

基本上，我想要做的就是使用以下方法将更改应用于选项：hover on settings-btn而不是悬停在选项上。

Answer 1

如果#settings-btn在#options之外，你就可以做到这样的事情：

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

但实际上你不能因为你的按钮位于想要扩大尺寸的东西里面。

Js会做这项工作，但是如果你想做纯粹的CSS，你必须改变你的html。

也许你也可以做一些技巧： See this topic 但我建议你改变你的html结构。

抱歉我的英文不好

按钮手风琴（CSS）

1 个答案: