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

时间:2015-12-28 06:51:59

标签: javascript html css css3

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

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

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



.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;
}

<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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

这样的东西?

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