CSS / Javascript-使用悬停显示下拉div

Question

我很难过...我有一个使用表的现有导航栏（我知道使用UL标记会更好，但我正在编辑一个现有页面，因此宁愿不要重新发明轮子） 。 悬停时，我有一个javascript片段显示了一个下拉菜单。 但是，我不知该如何在适当的时间使它消失。 与...类似，当您将鼠标悬停在anavbar1上时，div将按预期显示。 但是，如何在指定的秒数或触发另一个导航栏下拉菜单（如正常下拉菜单）后使其隐藏？ 这是我的整个代码：

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600" rel="stylesheet"> 
<style type="text/css">
    #anavbar0 {
        display: block;
        width: 633px; height: 107px;
        background: url("../GFX/slice0.png") no-repeat 0 0;  
    }
    #anavbar0:hover {}
    #anavbar0 span {
        display: none;
    }

    .anavbar1 {
        display: block;
        width: 104px; height: 107px;
        background: url("../GFX/slice1.png") no-repeat 0 0;
    }
    .anavbar1:hover .dropdown1 {
        display: block;
    }
    .anavbar1:hover {
        background-position: 0 -107px;
    }
    .anavbar1 span {
        display: none;
    }

    #anavbar2 {
        display: block;
        width: 169px; height: 107px;
        background: url("../GFX/slice2.png") no-repeat 0 0;
    }
    #anavbar2:hover {
        background-position: 0 -107px;
    }
    #anavbar2 span {
        display: none;
    }

    #anavbar3 {
        display: block;
        width: 134px; height: 107px;
        background: url("../GFX/slice3.png") no-repeat 0 0;
    }
    #anavbar3:hover {
        background-position: 0 -107px;
    }
    #anavbar3 span {
        display: none;
    }

    #anavbar4 {
        display: block;
        width: 102px; height: 107px;
        background: url("../GFX/slice4.png") no-repeat 0 0;
    }
    #anavbar4:hover {
        background-position: 0 -107px;
    }
    #anavbar4 span {
        display: none;
    }

    #anavbar5 {
        display: block;
        width: 103px; height: 107px;
        background: url("../GFX/slice5.png") no-repeat 0 0;
    }
    #anavbar5:hover {
        background-position: 0 -107px;
    }
    #anavbar5 span {
        display: none;
    }

    #anavbar6 {
        display: block;
        width: 144px; height: 107px;
        background: url("../GFX/slice6.png") no-repeat 0 0;
    }
    #anavbar6:hover {
        background-position: 0 -107px;
    }
    #anavbar6 span {
        display: none;
    }

    #anavbar7 {
        display: block;
        width: 111px; height: 107px;
        background: url("../GFX/slice7.png") no-repeat 0 0;
    }
    #anavbar7:hover {
        background-position: 0 -107px;
    }
    #anavbar7 span {
        display: none;
    }

    .dropdown1 {
        display:none;
       position: absolute;
       top:200px;
       background-color: #f9f9f9;
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       z-index: 1;
    }

    #drop1 {
        position: absolute;
        width: 119px;
        height: 117px;
        z-index: 1;
        left: 634px;
        top: 115px;
        visibility: hidden;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 36px;
    }
    .hoverTable{
        width:100%; border-collapse:collapse;
    }
    .hoverTable td{
        padding:7px;
        border:#888888 1px solid;
    }
    .hoverTable tr{
        background: #444444;
        color:#EEE;
    }  
    .hoverTable tr:hover {
        background-color:#294E7A
    }
</style>
<script type="text/javascript">
    div = {show: function(elem) {document.getElementById(elem).style.visibility = 'visible';},
    hide: function(elem) {document.getElementById(elem).style.visibility = 'hidden';}}
</script>
<table width="900" border="0" cellpadding="0" cellspacing="0" >
    <tr>
        <td width="98"><a id="anavbar0" ></a></td>
        <td onMouseOver="div.show('drop1')"  width="98" class="anavbar1"><a id="anavbar1" href="home.php" ></a></td>
        <td width="117"><a id="anavbar2" href="link1.php"></a></td>
        <td width="115"><a id="anavbar3" href="link2.php"></a></td>
        <td width="134"><a id="anavbar4" href="link3.php"></a></td>
        <td width="78"><a id="anavbar5" href="link4.php"></a></td>
        <td width="117"><a id="anavbar6" href="link5.php"></a></td>
        <td width="117"><a id="anavbar7" href="link6.php"></a></td>
    </tr>
</table>
<div id="drop1" >
    <table align="right" class="hoverTable">
        <tr>
            <td align="right">Text 1A</td>
        </tr>
        <tr>
            <td align="right">Text 2A</td>
        </tr>
        <tr>
            <td align="right">Text 3A</td>
        </tr>
    </table>
</div>

Answer 1

如果使用onmouseover将<div id="drop1">到td中， <div id="drop1">技术上讲，该div将位于td内，因此，当鼠标离开表单元格和“ drop1” div时，会触发onmouseout事件。

但是，如果需要设置drop1的样式，则应考虑到上边距会破坏td的连续性，并且当箭头触摸边距时会触发onmouseout事件。

这是（相当粗糙的）jsfiddle进行演示： https ://jsfiddle.net/uxnu65wf/

使用这种方法的PS，您可能不需要JavaScript，因为可以通过在CSS中使用:hover来实现相同的功能。

Answer 2

您会发现这是“鼠标悬停”

<td onMouseOver="div.show('drop1')" ...

您需要添加“ mouseout”

<td onMouseOut="div.hide('drop1')" ...

在js中：

<script type="text/javascript">
div = {show: function(elem) {document.getElementById(elem).style.visibility = 'visible';},
       hide: function(elem) {document.getElementById(elem).style.visibility = 'hidden';}}
</script>