Хранение div: всегда наведите указатель мыши

Question

Один вопрос о сохранении навешенного содержимого div всегда виден.

У меня есть большая решетка из тд. При наведении курсора на каждый td я хочу отобразить инфобокс, содержащий дополнительные данные об этом td. Текущий код:

JS-Fiddle

#Grid { 
} 
.Field { 
    border:thin solid black; 
    width:30px; 
    height:30px; 
    float:left; 
    background-color:blue; 
    position:relative; 
    z-index:0; 
} 
.FieldOverview { 
    display:none; 
} 
.Field:hover { 
    background-color:red; 
} 
.Field:hover .FieldOverview { 
    display:block; 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:100px; 
    height:100px; 
    border:thin solid black; 
    background-color:red; 
    z-index:1; 
} 

Моя проблема в том, что парить-инфо-окно не отображается правильно. Я попытался добавить z-index, чтобы убедиться, что информационное окно всегда отображается перед другими td, но оно не работает. Я также смотрел на эти вопросы, но они не совсем дать мне то, что мне нужно:

Here и Here

2-й У меня есть проблема, что при наведении курсора мыши над тд Я хочу, чтобы держать выскакивают инфобокс когда мышь перемещается в инфобокс. В настоящее время, когда мы перемещаем мышь в всплывающем инфобоксах, как только мышь наступает на другой td, текущая инфобокс снова устанавливается для отображения: none и отображается инфобокса нового td.

Я надеюсь, что кто-то из вас знает, как это осуществить.

Answer 1

Z-index работает только на позиционированных элементах (элементы с положением, отличным от статического). Вы, кажется, Тхо добавили position: relative к .Field класса, так что вы просто должны Z-индекс для состояния парения:

http://jsfiddle.net/KrU6m/4/

Answer 2

Попробуйте это - я просто добавил свойство Z-индекс.

JSFIDDLE

.Field:hover { 
    background-color:red; 
    z-index: 3000; 
}