CSS hover 마우스롤오버

이렇게 헤더 부분에 마우스를 가져다 대면 빨갛게 강조표시가 나올수 있는 hover 태그 연습!

 

 

1. hover 할 대상 만들기 (없어지게할)

빨간줄을 넣어보자.

먼저 가상클래스 after로 a태그로 작성된 태그에 꾸며준다.

#header .gnb_wrap a:after {
    content: '';
    height: 3px;
    background: red;
    width: 100%;
    left: 0;
    bottom: 30px;
    position: absolute;
}

 

 

---

after 은 가상선택자이기때문

content :'';  속성 필수 height:  높이값을 지정해주고 backfround:  배경색을 지정해주고 width:  넓이지정 (부모값에 이미 넓이가 지정되어있어 100%) bottom:  바닥에서 올라오는 높이 지정 position: abolute  로 띄어주기 (기준점은 부모에게 position: relative; 적용)

 

 

 

2. hover 적용해주기

*클릭하면 나오게 할 상위 태그에 지정해준다. (상위 태그 다음 hover 태그 지정 > 뒤에 다시 after 클래스를 적용)

그리고 꼭 속성적용 display: block (박스요소 처럼 지정해준다는 뜻)

#header .gnb_wrap a:hover:after {
    display: block;
}

 

---

 

그리고 다시

3. hover을 적용할 상위태그에 

display : none 속성적용 (커서를 가져다 대지않으면 안보이게 숨켜놓는것)

#header .gnb_wrap a:after {
    content: '';
    height: 3px;
    background: red;
    width: 100%;
    left: 0;
    bottom: 30px;
    position: absolute;
    display: none;
}

after 태그에서 

display: none 을 적용해주면

기존 빨간 박스를 없애준다는 뜻이된다.

 

그럼 보통은 안보이다가 마우스를 가져가면 보이게되는 hover 적용완료!