CODEWITHSUNDEEP
csscross-browser
reactor
reactor

Reputation:

css overflow in a:hover tag

I have an image(a map) with some points of interest placed using position: absolute and the coordinates of each poi. I want it to expand the info of each POI on mouseover using:

.poi a {
    width: 32px;
    height: 32px;
    overflow: hidden
}

.poi a:hover {
    width: 128px;
    height: 192px;
    overflow: auto
}

This works fine in IE, but it doesn't work in firefox or chrome. It isn't cropping the overflow, it just shows all the info at once.

Upvotes: 0

Views: 1512

Answers (1)

Seamus
Seamus

Reputation: 1235

Make them block or inline-block elements because (from the snippet above) the links are inline which will not have overflow.

.poi a {
    width: 32px; 
    height: 32px; 
    overflow: hidden;
    display: block;
}

Upvotes: 3

Related Questions