Question

我有元素，当我将鼠标悬停在链接上时（例如下拉菜单）推送列表。它的工作正常，但当它超过div时，它具有position：absolute属性，并且我将鼠标移动到位置，当后面的元素开始时，悬停将丢失并且列表消失。

你能解决这个问题吗？

编辑：

HTML

<table class="dp-table">
    <tbody><tr>
        <td></td>
        <td>
            <ul class="dropv">
                <li><a href="#">Exports</a>
                    <table class="js-items innerTable">
                        <tbody>
                    <tr><td>2014-05-19 11:31</td>
<td class="right"><a>Download</a></td>
</tr><tr><td>2014-05-19 12:20</td>
<td class="right"><a>Download</a></td>
</tr></tbody></table>
                </li>
            </ul>
        </td>
    </tr>
</tbody></table>

CSS

.dp-table { float: left; }
.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
.dropv a {display: inline; width: 200px;}
.dropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
.dropv li table {position: absolute; background: #241F1B; z-index: 1000;
  padding: 0px 0px 0px 4px; width: 370px; left: -9999px;padding-top: 0.4375rem;} /* second-level lists */
  .dropv li:hover table {left: auto; } /* nest list under hovered list items */
  .dropv li table a {color: $activeColor; cursor: pointer; transition: color 0.5s ease; text-decoration: none;}
.dropv li table a:hover {color: #FFFFFF;}
.dropv li table {
    display: inline-block;
    max-width: 235px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #90887A;
    font-size: 0.8125rem;
    line-height: 2.2;
    margin-left: -130px;
    margin-top:20px;
    border-radius: 10px;
    opacity: 0.9;

    tr {

        td.right {
            text-align: right;
            width: 50%;
        }

    }
}

绝对定位元素

<div class="tips-container"></div>

和CSS

.tips-container {
    height: 30px;
    position: absolute;
    width: 100%;
    z-index: 3;
}

Answer 1

试试这个

FIDDLE

<table class="dp-table">
<tbody><tr>
    <td></td>
    <td>
        <ul class="dropv">
            <li><a href="#">Exports
                <table class="js-items innerTable">
                    <tbody>
                <tr><td>2014-05-19 11:31</td>
<td class="right"><a>Download</a></td>
</tr><tr><td>2014-05-19 12:20</td>
<td class="right"><a>Download</a></td>
</tr></tbody></table>
            </a></li>
        </ul>
    </td>
</tr>
</tbody></table>




.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
.dropv a {display: inline; width: 200px;}
.ddp-table { float: left; }
.ropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
.dropv li table {position: absolute; background: #241F1B; z-index: 1000;
  padding: 0px 0px 0px 4px; width: 370px; left: -9999px;padding-top: 0.4375rem;} 
.dropv li:hover table {left: auto; } /* nest list under hovered list items */
.dropv li table a {color: $activeColor; cursor: pointer; transition: color 0.5s ease;       text-decoration: none;}
.dropv li table a:hover {color: #FFFFFF;}
.dropv li table {
display: inline-block;
max-width: 235px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #90887A;
font-size: 0.8125rem;
line-height: 2.2;
   border-radius: 10px;
opacity: 0.9;


}

td.right {
text-align: right;
width: 50%;
}

当元素背后的绝对元素时，元素丢失了

1 个答案: