javascript - 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

如果你移动<div id="drop1">使用 onmouseover 进入 td 而不是技术上 div 将在 td 内，因此当鼠标离开表格单元格和“drop1”div 时将触发 onmouseout 事件。

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

这是(相当粗糙的)jsfiddle 来演示它:https://jsfiddle.net/uxnu65wf/

附言使用这种方法，您可能不需要 javascript，因为使用 :hover 可以实现同样的效果在 CSS 中。