benhowdle89 benhowdle89 - 1 year ago 63
CSS Question

Hovered element to overflow out from an overflow:hidden element css

I have made a fiddle for reference: http://jsfiddle.net/kLFn9/

The

overflow:hidden
in question is highlighted.

Basically, i'm using
:hover:after
to show a tool tip. but the parent element has
overflow: hidden
on it. How can i force the element hovered to escape the parent element?

Relevant CSS:

div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}

span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}

Answer Source

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download