Hover overflow overflow element: hidden css element

Question

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

Overflow overflow:hidden highlighted.

Basically, I use :hover:after to show a hint. but the parent element has overflow: hidden . How to make an element that hangs leave the parent element?

Matching 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 1

Unfortunately, there is no (simple) way to allow the child tag to override the effects of the overflow:hidden declaration in the parent div. See: Allow a specific tag to override overflow: hidden

Your only possible regression would be with javascript: first take the range offset relative to the document, then move it to another location in the DOM (i.e. the direct child to the body), set its position to absolute and use the offsets you grabbed to set your left and top properties that could find it in the same place in the document, but now it is not contained in the div, and therefore no longer need to obey overflow:hidden .

Answer 2

To get around overflow:hidden , you can fool it .. see fooobar.com/questions/124181 / ...

Answer 3

I'm not sure what you are trying to get, but I recreated the framework for viewing. These are mostly smoke and mirrors, where I call: hover and .class related to it.

http://jsfiddle.net/WE8Dw/

Hope this helps.

Answer 4

You cannot use simple CSS to overflow the boundaries of parent elements with a child element if it was set to overflow:hidden; . On a possible CSS option, use the sibling element for the one that has overflow:hidden; , and show it as a popup.

Answer 5

In some cases, you can exit using div{position: absolute;}

Answer 6

You can use margin-top and padding-top .

padding-top will expand the parent area, but a negative margin-top keep it at the expected position.

It looks like you are avoiding overflow, but actually it is not.

 div { width:500px; height:200px; background:red; margin: 50px; overflow: hidden; /* this rule */ background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */ padding-top: 200px; /* space required to display the tooltip */ margin-top: -150px; /*200px - 50px of the original margin*/ } span { background: blue; color: white; position: relative; top:100px; display:block; width: 100px; margin: auto; } span:hover:after { content: attr(data-name); color: black; position: absolute; top: -150px;; left: 0; } 

 <div> <span data-name="here">hover</span> </div> 

This can cause problems with pointers, but you can fix them using pointer-events .

Answer 7

You can set a fixed position for the child.