Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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;   
}
like image 392
benhowdle89 Avatar asked May 04 '12 09:05

benhowdle89


People also ask

How do you clip the overflowing content from an HTML element?

Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead. As of Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal , and -moz-scrollbars-vertical are behind a feature preference setting.

How do you hide an overflow element?

The trick is to use flex-flow: column wrap; in conjunction with overflow: hidden; on the container. The former dictates that the content is stacked vertically and that anything that does not fit should be wrapped into a second column, outside of the content box of the container.

What is overflow hidden in CSS?

With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.


2 Answers

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.

like image 181
Faust Avatar answered Oct 21 '22 16:10

Faust


You can use margin-top and padding-top.

padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.

It will look like you're escaping the overflow, but in fact you're 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 may introduce pointer events problems, but you can fix them using pointer-events then.

like image 32
Luizgrs Avatar answered Oct 21 '22 14:10

Luizgrs