본문 바로가기

hover2

CSS 가상클래스 (1)-2_마우스 오버 효과(hover, transition) 추가! hover와 transition을 가지고 놀다가 transition에 width와 height의 속도를 다르게 적용할 수 있는 것을 발견했다. .parent { width: 400px; height: 200px; position: relative; } .child { position: absolute; width: 25px; height: 25px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: blueviolet; transition: width 0.95s, height 1s; } .child:hover { width: 100%; height: 100%; background-color: rgb(216, 179, 250);.. 2022. 1. 7.

CSS 가상클래스 (1)_마우스 오버 효과(hover, transition) 마우스가 올라갔을 때 변화를 주는 가상클래스에 대해서 알아보자 hover a태그로 hover를 활용해보았다. 들어가기전에 a태그 관련 알아둘 것 1. href 속성을 비워두면 jQuery가 작동하지 않는다. -> #none을 넣어주자! 2. body의 색상 속성을 적용받지 않는다. 사용법 선택자:hover 위처럼 선택자 뒤에 가상클래스를 적어주면 되는데 선택자와 가상클래스 사이에 띄어쓰기가 있으면 안된다! 예시1 공지사항 Q&A 커뮤니티 body { background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; font-weight: 700; transition: 0.3s; } a:hover { .. 2022. 1. 7.

이전 1 다음

티스토리툴바