Question

我在使用CSS显示弹出式div时遇到了一些麻烦。用一个例子可以更好地解释这个问题。采取以下html：

<html>
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }

            #popup:hover > #form {
                display: block;
            }
        </style>
    </head>
    <body>
        <span id="popup">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                </form>
            </div>
        </span>
    </body>
</html>

它由单个span元素和包含表单的单个隐藏div元素组成。鼠标悬停在span元素上时会显示div。问题是，当我要在下拉框中选择一个选项时，div会消失，就好像它失去了焦点一样。结果是我只能使用键盘更改下拉值。

我的问题是：我该如何解决这个问题？任何有关该主题的线索都表示赞赏。

Answer 1

我不确定问题究竟是什么，但以下css适用于Ubuntu 10.04上的Chrome 6.0.472.62和Firefox 3.6.10：

#popup {
    position: relative;
}
#form {
    width: 12em;
    display: none;
}
#popup:hover #form {
    clear: both;
    margin: 0;
    display: block;
    position: absolute;
    top: 1em;
    left: 0;
}
#popup form select:focus,
#popup form select:hover {
    display: block;
}

演示于：jsbin

值得将#popup更改为div，正如（我以为我）之前评论的那样。

Answer 2

我相信你可能在这里运气不好，因为<option>元素的渲染依赖于浏览器/操作系统/平台，而不是CSS盒子模型的一部分。使用JavaScript（和jQuery），这非常简单。我在表单中添加了一个“完成”按钮，因为这可能是选择何时隐藏表单的更好解决方案。否则，用户必须非常小心，不要将鼠标指针移动到选择下拉列表之外，否则一切都会消失（如果我已正确理解您的请求。）

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
        <script language="javascript">
        function showForm() {
            $("#form").show();
        }
        function hideForm() {
            $("#form").hide();
        }
        </script>
    </head>
    <body>
        <span id="popup" onmouseover="showForm()">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                    <input type="button" value="Done" onclick="hideForm()" />
                </form>
            </div>
        </span>
    </body>
</html>

Answer 3

您只在悬停时显示弹出窗口，因此当鼠标离开弹出窗口时，它会被隐藏，

你必须在span元素的onmouseover上显示它，并在用户点击页面上的其他位置时（弹出除外）或者当他点击 close <时隐藏它弹出窗口中的/ em>选项。

我认为你不能用纯CSS做到这一点。你需要一些javascript。

正确显示CSS'弹出窗口'时出现问题

3 个答案: