Question

我创建了弹出窗口，即在悬停时显示的列表，它适用于默认页面，但如果我向下滚动弹出窗口也会按下滚动条。

HTML 代码下方会创建一个弹出列表，该列表最初为hidden，并显示在hover上，其中包含以下 CSS 。

很抱歉发布了所有内容，但我尝试更改position，top，left，right以按照几个类似问题的建议调整弹出位置，但没有运气。

＆＃13;

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  position: fixed;
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

＆＃13;

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
  <div class="dataheight">
    <ul class="dropv">
      <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
        <li>No. Of Streams:' + readBytes + '</li>
        <li>Message Sent(Bytes):' + nbStreams + '</li>
        <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
        <li>Elapsed Time(ms):' + elapsedTime + '</li>
        <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
        </li></ul></li>
    </ul>
  </div>
</td>

＆＃13;

Answer 1

这样的东西？

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
  <div class="dataheight">
    <ul class="dropv">
      <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
        <li>No. Of Streams:' + readBytes + '</li>
        <li>Message Sent(Bytes):' + nbStreams + '</li>
        <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
        <li>Elapsed Time(ms):' + elapsedTime + '</li>
        <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
        <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
        </li></ul></li>
    </ul>
  </div>
</td>

向下滚动时弹出窗口更改位置

1 个答案: