CODEWITHSUNDEEP
htmlcssfirefox
ptriek
ptriek

Reputation: 9276

Firefox: div:hover only working on first row

Upvotes: 1

Views: 267

Answers (2)

Jon
Jon

Reputation: 437454

Firefox is not taking kindly to your applying position:relative to the trs themselves (I am not sure why, did not have time to look it up). This has the effect of all your div.hover elements being stacked on the first table row (see it here, added borders to make it clear).

As a workaround, you can wrap the contents of each tr in a div, and apply position:relative to that div instead of the tr.

Upvotes: 1

Betard Fooser
Betard Fooser

Reputation: 526

I believe your issue is related to this css definition, you are positioning ALL your "hover" items to absolute and defining top 0px. 

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

Simply changing the positioning to relative will fix the issue you are having, then you could position your "some text" instead. or rethink your structure of course.

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

But for your question specifically, the above class is the culprit.

Upvotes: 1

Related Questions