html - 隐藏的 DIV 位置

Question

我有一些表格，在一些 DIV 中。DIV 被隐藏，并在您从选择框中选择一个选项时显示。我需要一种定位隐藏 DIV 的方法，因为默认位置位于上述选择框下方。

Answer 1

<table> 
<tr>
<td>
<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Option 1</option>
<option value = "2">Option 2</option>
</select>
</td>
<td>
<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>
</td>
</tr>
</table>

和

<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}

</script>

Answer 2

您可能需要使用 Z-index 将元素定位在选择框上方。很高兴先看到演示

Answer 3

试试这个FIDDLE。它可能会帮助你。
只需选择想法并与您的选择选项一起使用。
这是jQuery：

$('#testDiv').mouseenter(function () {
        $('.hoveruserinfo').fadeIn();
    });
    $('#testDiv').mouseleave(function () {
        $('.hoveruserinfo').fadeOut();
    });

CSS：

.hoveruserinfo
{
    background-color: #ccc;
    font-size: 11px;
    color: #333;
    border: 1px solid #ccc;
    font-weight: bold;
    border-radius: 4px;
    padding: 10px;
    margin-top: -2px;
}

HTML：

<div id="testDiv">  
Test
</div>
<div class="hoveruserinfo" style="position:absolute;width:206px;display:none;margin-left:147px;">
James Smith <span>this is my data</span>           
</div>