본문 바로가기

👁‍🗨FRONT-END17

[날마다 3분 CSS] 가상클래스 :hover :hover는 CSS의 가상 클래스로 웹 브라우저에서 사용자의 마우스가 요소에 올라가면 활성화된다. 아래는 마우스를 올리면 넓이와 높이가 커지며 박스색깔이 빨간색으로 바뀌는 hover 효과입니다. HTML 삽입 미리보기할 수 없는 소스 css 선택자뒤에 :hover 붙여 코드를 작성합니다. HTML 삽입 미리보기할 수 없는 소스 위에서 보듯이 마우스가 올라가기전( .box1 ) css와 마우스가 올라간 후( box1:hover )의 css를 볼 수 있다. 넓이/높이 100px의 오렌지 색깔 박스가 마우스가 올라갔을 때 넓이/높이 300px의 빨간색 박스로 변하는 코드이다. 이렇게 마우스가 올라갔을 때 와 올라가지 않았을 때 전과 후의 상태를 정의하여 요소가 변하는 효과를 줄 수 있는 것이다. 💫실습 - .. 2022. 10. 4.

이전 1 2 3 4 5 다음

티스토리툴바