unosił elementem do przepełnienia się z overflow: hidden elementu CSS

Question

Zrobiłem skrzypce dla odniesienia: http://jsfiddle.net/kLFn9/

overflow:hidden w pytaniu jest podświetlona.

Zasadniczo używam :hover:after, aby wyświetlić końcówkę narzędzia. ale element nadrzędny ma na nim overflow: hidden. Jak mogę wymusić obrót elementu, aby uciec przed elementem rodzica?

Stosowna 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

Niestety, nie ma (łatwy) sposób, aby umożliwić tag dziecko przesłonić skutki deklaracji overflow:hidden na div. Zobacz: Allow specific tag to override overflow:hidden

Twoje jedyne możliwe odwołanie byłoby z javascript: najpierw zgarnij przesunięcie zakresu w stosunku do dokumentu, następnie przenieś go do innej lokalizacji w DOM (tj. Bezpośrednie dziecko do ciała), ustaw jego pozycję na absolutną, i użyj przesuniętych do siebie przesunięć, aby ustawić jego lewą i górną właściwość, które umiejscowiłyby to w tej samej pozycji w dokumencie, ale teraz nie są zawarte przez element div, a więc nie muszą już być zgodne z overflow:hidden.

Answer 2

Nie jestem pewien, co próbujesz uzyskać, ale odtworzyłem ramkę podpowiedzi do obejrzenia. To w zasadzie dym i lustra, do których dzwonię: hover i związana z nim klasa.

http://jsfiddle.net/WE8Dw/

Nadzieja to pomaga.

Answer 3

Nie ma możliwości użycia zwykłego CSS do przepełnienia granic elementów rodzica z dzieckiem, jeśli zostało ustawione na overflow:hidden;. Na możliwej opcji CSS należy użyć elementu rodzeństwa do tego, który ma overflow:hidden; ustawiony i pokazać jako popup.

Answer 4

Możesz ustawić pozycję dziecka na ustaloną.

Answer 5

Aby ominąć overflow:hidden, można go oszukać .. patrz: https://stackoverflow.com/a/29687454/2165415

Answer 6

W niektórych przypadkach można uciec z div{position: absolute;}

Answer 7

Można użyć margin-top i padding-top.

padding-top rozszerzy twój obszar nadrzędny, ale ujemny margin-top utrzyma go w oczekiwanej pozycji.

Wygląda na to, że unikniesz przepełnienia, ale w rzeczywistości nie jesteś.

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>

Może to wprowadzać wskaźnika wydarzenia problemy, ale można je naprawić za pomocą pointer-events wtedy.