Od niepamiętnych czasów starsze pokolenia zajmowały się dobieraniem ubrań dla swojej latorośli. Złamiemy dziś tą zasadę, choć tylko w aspekcie CSS. Będziemy zmuszać rodzica, aby nie zmieniał wyglądu przy najechaniu myszy, a zmieniał się wtedy, kiedy będziemy straszyć myszą jego dziecko.
Trącić myszką (dziecko).
Zaczynamy jak to zwykle bywa, od kodu.
<div>
<span>Tekst</span>
</div>
+
div {
width: 200px;
height: 200px;
border: 1px solid #000;
pointer-events:none;
}
Jeśli dodamy taki selektor:
div span:hover{
background:#f00;
}
to możemy zmieniać jedynie właściwości dziecka.
Jeśli dodamy taki selektor:
div:hover {
background: #f00;
}
to będziemy zmieniać właściwości naszego rodzica, ale po najechaniu na dziecko i również jego samego. I tu niespodzianka. Kiedy wyłączymy interakcję z użytkownikiem na rodzicu, ale włączymy na dziecku (aby nie dziedziczyło braku interakcji), zdarzenia będą odbierane tylko przez dziecko, ale nadal będa mieć wpływ na rodzica. To trochę tak jakbyśmy mieli do czynienia z nieistniejącym, aczkolwiek wyczekiwanym selektorem wyboru rodzica w CSS - coś w rodzaju:
div < span:hover lub div:has(span:hover)
CSS będzie więc wyglądać tak:
div {
width: 200px;
height: 200px;
border: 1px solid #000;
pointer-events:none;
}
div span{
pointer-events:auto;
}
div:hover {
background: #f00;
}
Choć dzisiejszy wpis zawierał nutkę szaleństwa, to w następnym wracamy do samotnego, spokojnego geek'owania.
Przydatne linki:
Właściwość pointer-events w CSS