我在使用 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 消失了，就好像它失去了焦点一样。结果是我只能使用键盘更改下拉值。
我的问题是:我该如何解决？感谢您提供有关该主题的任何线索。
最佳答案
我相信你在这里可能不走运，因为 <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>
关于html - 正确显示 CSS 'popup' 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3789567/