Question

我现在很难...我有一个使用表的现有导航栏（我知道使用UL标签会更好，但我正在编辑一个预先存在的页面，所以宁愿不重新发明轮）。我有一个javascript snipped，当你悬停时会显示一个下拉菜单。然而，我不知道如何在世界上让它在正确的时间消失。如...当你将鼠标悬停在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将在td内部，那么当鼠标离开表格单元格时，onmouseout事件将会触发，并且＃34; drop1＆＃34;格。

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

这是（相当粗略）jsfiddle来演示它：https://jsfiddle.net/uxnu65wf/

P.S。使用这种方法，您可能不需要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>

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

2 个答案: