Разрешить перекрывающиеся элементы и избежать смещения

Я как бы застрял в этом, если бы кто-то мог пролить свет, я был бы очень благодарен.

Хорошо, я здесь.

Я сделал эту специальную таблицу с помощью div для тела таблицы, вложенного для содержимого, и каждая ячейка является элементом span. Все отлично, но одно.

То, что я пытаюсь достичь, - это когда пользователь наводил курсор на ячейку (диапазон), если контент слишком длинный (что очень много), чтобы соответствовать ширине, он всплывает сам и показывает содержимое в виде всплывающей подсказки.

На самом деле уже достичь purpouse, ну вроде, но клетка (span) смещает содержимое строки, если содержимое больше, и что вопрос о том, как можно избежать этого поведения? Как разрешить контент перекрывать остальную часть строки и избегать перемещения?

Для лучшего объяснения проверьте эту скрипку: http://jsfiddle.net/fuyn14en/2/

Здесь код (тот же, что и в скрипке).

Html:

<div id="tabla">
 <div id="tablaContenido">
 <div>
 <span>Short Content</span> 
 <span>Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrge Content makes the row displace how can i overlap so all other cells keep where they suppose to be?</span>
 <span>Short Content</span>
 <span>Short Content</span>
 <span>Short Content</span>
 <span>Short Content</span> 
 <span>Short Content</span>
 </div>
 </div>
</div>

и CSS:

#tabla{
 width: 100%;
 height: 100%;
 display: table;
 padding-bottom: 20px;
 position: relative;
 display: inline;
}

.tablaFila{
 width: 100%;
 height: 15px;
 float: left;
 display: table-row;
 margin: 0;
 border: 0;
 padding: 0; 
}

.tablaFilaContenido{
 margin: 0;
 border: 0; 
 padding: 5px 5px;
 width: 11%; 
 white-space: nowrap; 
 float: left;
 display: table-cell;
 font-size: 10px;
 overflow: hidden;
 position: relative;
}

.tablaFilaContenido:hover{ 
 background-color: #B2FF66;
 content: attr(title);
 z-index: 1; 
 display: block;
 width: auto; 
 position: static;
}

Пожалуйста, спросите, нет ли чего-то или нет. :)

Любая идея или предложение?

2 ответа

Здесь моя попытка: http://jsfiddle.net/fuyn14en/7/

Сделанные мной изменения:

  • Удалено содержимое: attr (заголовок); от наведения курсора (я объясню это ниже)
  • Добавлен дисплей: inline; для наведения на ячейку.
  • Измененная позиция: статическая; к позиции: абсолютная; при наведении на ячейку. Это основное свойство, которое препятствует продвижению других элементов вперед. Когда это позиционируется абсолютно, все остальные элементы в основном не признают, что он существует.
  • Добавлен селектор для.tablaFilaContenido: hover +.tablaFilaContenido. Это смежный селектор. Когда мы нависаем над ячейкой, мы даем ей абсолютное позиционирование, и все элементы после этого оттягиваются назад. Используя этот селектор, мы можем вернуть их туда, где они должны быть. Я сделал это так, когда вы наводили курсор на ячейку, следующая ячейка указана слева налево: 11% (ширина предыдущей ячейки) и padding-left: 15px (дополнение предыдущей ячейки + левое дополнение этого клетка.

Мне пришлось удалить "content: attr (title)"; потому что когда вы удаляете мышь от определенной ячейки таблицы (после ее зависания), маржа и дополнение, применяемые с.tableFilaContenido: hover+.tablaFilaContenido, будут сохранены, в результате чего ячейки будут неуместны.

.tablaFilaContenido:hover {
 background-color: #B2FF66;
 z-index: 1; 
 display: inline;
 width: auto;
 position: absolute;
 }

 .tablaFilaContenido:hover + .tablaFilaContenido { 
 margin-left: 11%; 
 padding-left: 15px; 
 }


попробуйте что-то вроде этого,

HTML

<div>
 <span>Short Content</span> 
 <span>Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrge Content makes the row displace how can i overlap so all other cells keep where they suppose to be?</span>
 <span>Short Content</span>
 <span>Short Content</span>
 <span>Short Content</span>
 <span>Short Content</span> 
 <span>Short Content</span>
 </div>

CSS

#tabla{
 width: 100%;
 height: 100%;
 display: table;
 padding-bottom: 20px;
 position: absolute;
 display: inline;

}

.tablaFila {

width: 100%;
height: 15px;
float: left;
display: table-row;
margin: 0;
border: 0;
padding: 0;

}

.tablaFilaContenido {

margin: 0;
border: 0; 
padding: 5px 5px;
width: 11%; 
white-space: nowrap; 
float: left;
display: table-cell;
font-size: 10px;
overflow: hidden;
position: relative;

}

.tablaFilaContenido: парить {

background-color: #B2FF66;
 content: attr(title);
 z-index: 1; 
 display: inline;
 width: auto; 
 position: absolute;

}

licensed under cc by-sa 3.0 with attribution.