Firefox: div: hover работает только в первом ряду

Question

• У меня есть очень простая таблица, содержащая div, который показывает некоторые меньшие внутренние div при наведении курсора.Просто старый CSS2, ничего особенного.

• Работает как положено в Chrome & Safari.

• В Firefox 8, однако,: hover работает только на первом TR - в то время как второй TR равен точно то же самое.

• Код не имеет ошибок проверки.

• Есть идеи, что может быть причиной такого поведения?

• Работает jsfiddle на http://jsfiddle.net/gNBSc/9/

Answer 1

Firefox не относится к вашему обращению position:relative к самим tr (я не уверен, почему, не успел его посмотреть).Это приводит к тому, что все ваши div.hover элементы укладываются в первую строку таблицы (см. Здесь здесь , добавлены границы, чтобы было понятно).

КакВ качестве обходного пути вы можете обернуть содержимое каждого tr в div и применить position:relative к этому div вместо tr.

Answer 2

Я полагаю, что ваша проблема связана с этим определением CSS, вы позиционируете ВСЕ ваши элементы наведения на абсолютные значения и определяете верхние 0px.

div.hover {
    height:150px;
    position:absolute;
    top:0px;
    width:150px;
}

Простое изменение позиционирования на relative решит проблему, с которой вы столкнулись, тогда вы могли бы вместо этого расположить свой «некоторый текст». или переосмыслите свою структуру, конечно.

div.hover {
    height:150px;
    position:relative;
    top:0px;
    width:150px;
}

Но именно для вашего вопроса виновным является вышеуказанный класс.