div всплывающее окно внутри тд - PullRequest
Новая
       5

div всплывающее окно внутри тд

3 голосов
/ 12 мая 2010

У меня есть таблица с кучей клеток. (Ни за что! Удивительно!: P) У некоторых ячеек есть небольшой div, который, когда вы наводите курсор мыши, становится больше, так что вы можете прочитать весь текст. Это хорошо работает и все. Однако, поскольку элементы html, которые появляются позже в документе, имеют более высокий z-индекс, когда элемент div увеличивается, он находится под другими элементами div в других ячейках.

HTML-код: 

<table>
<tr>
  <td>
    limited info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        informative long text is here
      </div>
    </div>
  </td>
  <td>
    some short info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        longer explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
  </td>
</tr>
</table>

Код JS: 

function tooltipshow(obj)
{
    obj.style.width = '30em';
    obj.style.zIndex = '100';
}

function tooltiphide(obj)
{
    obj.style.width = '1em';
    obj.style.zIndex = '20';
}

Неважно, если я динамически установлю z-index для чего-то более высокого, на mouseover. Это как z-индекс не имеет никакого влияния. Я думаю, что это как-то связано со столом.

Я проверял это в FireFox3. Когда я чувствую себя особенно мачо, я проверю это в IE.

Ответы [ 3 ]

1 голос
/ 12 мая 2010

Вы пробовали решение на основе CSS?

HTML: 

<table>
<tr>
  <td>
    limited info
    <div class="details">
      <div>
        informative long text is here
      </div>
    </div>
  </td>
  <td>
    some short info
    <div class="details">
      <div>
        longer explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
  </td>
</tr>
</table>

CSS: 

.details {
    position: relative;
}
.details div {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
}
.details div:hover {
    width: 30em;
    z-index: 100;
}

Если необходим Javascript, вы можете изменить строку .details div:hover { на .show-details { и применить класс к элементу, используя element.className = 'show-details';

0 голосов
/ 13 мая 2010

Оказывается, что установка z-index и непрозрачности все испортили. Проверьте это: 

<html>
<head>
<style>
td {
    background-color: #aaf;
    padding: 1em;
}

.relative {
    position: relative;
    width: 100%;
}

div.highlight {
    position: absolute;
    background-color: green;
    bottom: -1em;
    left: 0;
    width: 100%;
    height: 0.2em;
    /* the offenders */
    z-index: 10;
    opacity: 0.8;
}

div.tag {
    background-color: red;
    position: absolute;
    top: -5em;
    left: 0;
    width: 1em;
    height: 1.5em;
    overflow: hidden;
    z-index: 20;
    font-size: 0.6em;
    text-align: left;
    border: solid 0.1em #000;
    padding-left: 0.3em;
}

div.tag:hover {
    width: 30em;
    z-index: 100;
}
</style>
</head>
<body>
<table>
<tr>
  <td>
    limited info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        informative long text is here
      </div>
    </div>
    </div>
  </td>
  <td>
    some short info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        aaaaaaaaaalolkjlkjnger explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
    </div>
  </td>
</tr>
</table>
</body>
</html>
0 голосов
/ 12 мая 2010

Используйте тот же HTML / CSS из ответа @Kevin, но также измените z-индекс относительного div .details. Это будет работать лучше на IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...