목록2023/12/18 (1)
사이먼's 코딩노트
[HTML & CSS] Hover
[hover] hover는 마우스 이벤트로 메뉴 화면을 보이거나 감추는 기능이다. html과 css만으로 hover를 적용하여 해당 기능을 구현할 수 있다. 속성과 속성값을 작성하는 코드는 아래와 같다. 선택자:hover { 속성: 속성값; } 1. 인접동생 선택자 활용 목적 : .box에 마우스를 올렸을 때 .div-2 배경색이 green컬러로 변경되도록 한다. 문제점 : .box의 hover를 적용할 때 .div-2이 커스텀되어야 한다. 해결방법 : box와 .div-2의 엘리먼트는 형·동생 사이이기 때문에 인접동생 선택자인 +를 사용한다. 단점 : 인접동생 선택자를 활용했을 때 .box에 마우스를 올려놓았다가 .div-2로 마우스를 옮기면 커스텀된 속성값이 유지가 안된다. See the Pen ho..
HTML & CSS
2023. 12. 18. 14:04