Clever Geek Handbook

Css overflow in tag: hover

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

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

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

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

0


source to share


1 answer


Make them block or inline blocks, because (from the snippet above) the links are inline, which won't overflow.



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


source






More articles:


All Articles