hover: 해당 영역에 마우스를 올리면 설정한 속성이 나타나게 한다.
선택자1:hover선택자2 {}
(선택자1 : 마우스를 올리는 영역, 선택자2 : 속성이 나타나는 영역)
- 기본 CSS와 HTML
1) 마우스 올리는 곳과 속성이 나타나는 곳이 경우
( 마우스를 .open에 올렸을 때 결과)
2) 마우스를 올리는 영역과 속성이 적용되는 영역이 다를때의 예
(.inner에 마우스를 오리면 .close에 속성이 적용된다)
***
- open과 close는 부모자식 관계가 아니므로 띄어쓰기 x
다음과 같이 코드를 작성하면 올바르게 적용이 된다
(+ : 바로 다음에 나오는 태그)
***
다음의 코드들은 다 같은 의미이다 (우선순위, 명시성도 같다)
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
<CSS> web font (feat. 구글폰트) (0) | 2017.06.15 |
---|---|
<< 드롭다운 메뉴 만들기 >> (0) | 2017.06.10 |
<CSS>제외선택자와 상속 (0) | 2017.06.09 |
<CSS>CSS규칙과 효율적인 코드방법 (0) | 2017.06.09 |
<CSS>순서를 이용한 선택자 : nth / first or last-child (0) | 2017.06.08 |