๋ฐ์ํ
hover siblings style
-
[CSS] Hover ํ๋ ํ์ ๋ค(siblings) ์คํ์ผ ์ ์ฉCoding 2023. 5. 12. 17:36
๋ง์ฐ์ค ์ค๋ฒ ํ๋ ๋์ ํ์ ๋คํํ ์คํ์ผ์ฃผ๊ธฐ ์ผ๋ฐ์ ์ผ๋ก ํ์ ์๋ฆฌ๋จผํธ์ ์คํ์ผ์ ์ฃผ๋ ค๋ฉด Javascript๊ฐ ํ์ํฉ๋๋ค. ํ์ง๋ง, Javascript์์ด CSS๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. ๋ถ๋ชจ ์๋ฆฌ๋จผํธ์ :hover๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋ ๋ง์ฐ์ค ์ค๋ฒํ๋ ์์์ ์ ์ธํ ํ์ ์๋ฆฌ๋จผํธ๋ค์ ์คํ์ผ์ ์ฃผ๋ ๋ฐฉ์์ ๋๋ค. ๋ง์ฐ์ค ์ค๋ฒํ๊ณ ์๋ ๋์์ ๊ฐ์กฐํ๊ณ ์ถ์ ๋ ์ฌ์ฉํฉ๋๋ค. .parent:hover .child:not(:hover) { /* this style affects all the children except the one you're hovering over */ } + ์์ ์ฝ๋ HTML ์ฝ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐํ ์ ์๋ ์์ค