Question

我正在尝试创建一个显示数据表的悬停元素。

我无法将悬停元素堆叠放在主表格上方。

我尝试过几个方面，包括修复位置和调整z-index，但是所有内容似乎都会破坏悬停元素的格式和位置（即它需要相对于悬停在其上的文本进行定位，并且需要调整宽度和高度。）

＆＃13;

span.own3 {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #DCDCDC;
  color: #000000;
  font-size: 12px;
  height: auto;
  width: auto;
  min-width: 300px;
  letter-spacing: 1px;
  line-height: 14px;
  position: absolute;
  text-align: justify;
  top: 20px;
  left: 0px;
  display: none;
  padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}

hover.own2 {
  position: relative;
}

hover.own2:hover span {
  display: block;
}

.table.hoverstatus>tbody>tr:first-child>th {
  border: none;
}

＆＃13;

非常感谢任何指导。

Answer 1

使用position: absolute;代替position: relative; 请尝试以下代码：

span.own3 {
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid #DCDCDC;
  color: #000000;
  font-size: 12px;
  height: auto;
  width: auto;
  min-width: 300px;
  letter-spacing: 1px;
  line-height: 14px;
  position: absolute;
  text-align: justify;
  top: 20px;
  left: 0px;
  display: none;
  padding: 2px 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}

hover.own2 {
  position: absolute;
}

hover.own2:hover span {
  display: block;
}

.table.hoverstatus>tbody>tr:first-child>th {
  border: none;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div style="padding:15px;">

<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">

  <table id="example" class="table table-striped" width="100%">
    <thead>
      <tr>
        <th>Feeling</th>
        <th>Day</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>
          Super
        </td>
        <td>1</td>
      </tr>

      <tr>
        <td>

          <hover class="own2">Great<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>

        </td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

</div>

</div>

Answer 2

您需要更改一些[file: /Documents/57/Downloads/Images/9d1687ab5f4374a2c00429a24316b5ccd3fb0a67.png] exists after write:1标记以及- (UIImage *) imageFromURL:(NSURL *)imageURL { BOOL fileExists = [[NSFileManager defaultManager] fileExistsAtPath:[imageURL path]]; if (!fileExists) { ZLogDebug(ZLogTypeFile, @"[file: %@] exists: %d", imageURL, fileExists); return nil; } return [UIImage imageWithData:[NSData dataWithContentsOfURL:imageURL]]; }

[file: /Documents/57/Downloads/Images/9d1687ab5f4374a2c00429a24316b5ccd3fb0a67.png] exists: 1

html

工作小提琴here

希望它会对你有所帮助:)。

堆叠顺序的悬停元素

2 个答案: