css overflow in a:hover tag

Question

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.

Answer 1

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;
}