elemento se cernió se desborde hacia fuera de un overflow: hidden css elemento

Question

he hecho un violín para referencia: http://jsfiddle.net/kLFn9/

El overflow:hidden en cuestión está resaltado.

Básicamente, estoy usando :hover:after para mostrar una información sobre herramientas. pero el elemento padre tiene overflow: hidden en él. ¿Cómo puedo forzar al elemento suspendido a escapar del elemento principal?

CSS relevante:

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

Desafortunadamente, no hay manera (fácil) para permitir una etiqueta de niño para anular los efectos de la declaración overflow:hidden en el div padre. Ver: Allow specific tag to override overflow:hidden

Su único recurso posible sería javascript: primero tome la compensación del lapso relativa al documento, luego muévala a otra ubicación en el DOM (es decir, dirija al niño al cuerpo), establezca su posición en absoluta, y use los desplazamientos que agarró para establecer sus propiedades superior e izquierda, que lo ubicarían en la misma posición dentro del documento, pero ahora no está contenido en el div, por lo que ya no necesita obedecer overflow:hidden.

Answer 2

No estoy seguro de a qué intenta llegar, pero recreé un marco de sugerencias para que lo vea. Es básicamente humo y espejos donde llamo: hover y la clase asociada a él.

http://jsfiddle.net/WE8Dw/

Espero que esto ayude.

Answer 3

No es posible utilizar el CSS simple para desbordar los bordes de un elemento primario con un elemento secundario, si se configuró en overflow:hidden;. En la posible opción de CSS es usar un elemento hermano para aquel que tiene overflow:hidden; establecido y mostrarlo como emergente.

Answer 4

Puede establecer la posición del niño como fija.

Answer 5

Para omitir overflow:hidden, se puede engañar a ella .. ver: https://stackoverflow.com/a/29687454/2165415

Answer 6

En algunos casos se puede escapar con div{position: absolute;}

Answer 7

Puede utilizar margin-top y padding-top.

padding-top ampliará su área principal, pero un margin-top negativo lo mantendrá en la posición esperada.

Parecerá que está escapando del desbordamiento, pero en realidad no lo es.

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>

Esto puede acarrear problemas en los eventos de puntero, pero se puede solucionar utilizando pointer-events a continuación.