时间戳

首页 > 解决方案 > Fix covering hovered table / hovering problem with table

javascript - Fix covering hovered table / hovering problem with table

问题描述

I have a problem with creating table. I need to create a table with some of cells with hover/tooltip event. For example when I point to the cell, I need to show one column table with links, but when do this in that way I have problem with overlaping (I can't use links from first cell). For now I only tried to use CSS and HTML, but soltuion with JS is also accepted.

HTML:

<div class="ttip">
  <a class="foo">FOO</a>
  <table>
    <tr>
      <td><a href='bar'>Bar</a></td>
    </tr>
    <tr>
      <td><a href='baz'>Baz</a></td>
    </tr>
  </table>
</div>

<div class="ttip">
  <a class="foo">FOO2</a>
  <table>
    <tr>
      <td><a href='bar2'>Bar2</a></td>
    </tr>
    <tr>
      <td><a href='baz2'>Baz2</a></td>
    </tr>
  </table>
</div>

Style:

.ttip {
  position: relative;
  display: table;
}

.ttip>table {
  position: absolute;
  white-space: nowrap;
  border-collapse: collapse;
  display: none;

}

.ttip>table td {
  border: 1px dotted #000;
  padding: 2px;


}

.ttip:hover>table {
  display: table;

}

Live:

https://jsfiddle.net/uLm0gjcn/3/

Regards

标签： javascripthtmlcss

解决方案

The FOO2 is rendered after the FOO , meaning when its displayed, its technically below FOO2 text. To fix that you need to apply z-index in your css here in .ttip>table

.ttip>table {
  position: absolute;
  white-space: nowrap;
  border-collapse: collapse;
  display: none;
  z-index: 1;
}

This way, when the drop-down/tool-tip appears from FOO, it is rendered on top of FOO2.

Edit. Also, to make it not transparent, apply a background-color to css in .ttip>table. for example for a white background background-color: white;

推荐阅读