5
Po prostu natknąłem się na tę sytuację, w której ukryty obszar przepełnionego elementu nadal podlega kliknięciom myszy lub zawijanym myszom.Zapobieganie klikaniu ukrytych obszarów ukrytych elementów
Pomyślałem, że niewidoczny element lub region nie będzie celem zdarzeń myszy, więc czego tu brakuje?
Podąża za przykładem, w którym pojawia się to zachowanie, wystarczy, że najedziesz myszą poza kółko, ale w pobliżu zielonego kwadratu, a zauważysz, że selektor: hover działa.
#circle {
position:absolute;
height: 50%;
width: 28%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: black;
color: white;
border-radius: 200px;
overflow: hidden;
}
#square {
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
background: green;
cursor: pointer;
}
#square:hover {
background: yellow;
}<body>
<div id="circle">
<div id="square"></div>
</div>
</div>Dodane 2016-12-05: To dziwne zachowanie nie występuje, jak wskazano w komentarzach w Firefoksie przeciwieństwie zdarza Chrome.
Pozdrawiam, utxeee.
Na jakiej przeglądarce to widzisz? Wszystko wydaje się działać zgodnie z oczekiwaniami w przeglądarce Firefox 50.0.1. – Rounin
Szczerze mówiąc, zapominam wspomnieć, że przetestowałem go także na Firefoxie (48.0.2) i potwierdzam, że działa zgodnie z oczekiwaniami. Używam teraz Chrome (wersja 49.0.2623.112). – utxeee
Jest to oczywiście błąd z silnikiem renderującym mrugnięcia, ale nie wiem, skąd się bierze. Próbowałem dodać 'wskaźnik-events: none;' do '# circle' i' wskaźnik-events: auto; 'do' # square', ale nie miało to znaczenia. – Rounin