[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 hover(인접동생선택자 활용과 단점) by psm817 (@psm817) on CodePen.

 

 

2. 자식 선택자 활용

• 인접동생 선택자를 활용했을 때의 단점을 보완하기 위해서는 태그의 관계를 형·동생 사이가 아닌 부모·자식 사이로 설정하여 커스텀을 해야한다.
• 목적 : .box에 마우스를 올려놓았다가 .div-2로 마우스를 옮겨도 hover 적용시킨 속성값이 유지되도록 한다.
• 문제점 : 인접동생 선택자를 사용했을 때 속성값이 유지가 되지 않는다.
• 해결방법 : .box와 .div-2의 관계를 부모 자식 관계로 만들어 .box에는 position: relative;와 .div-2에는 position: absolute;를 적용한 후, 자식 선택자 >를 사용하여 hover를 추가하면 부모인 .box에 마우스를 올려도 .div-2의 색이 변경되고 .div-2에 마우스를 옮겨도 변경된 .div-2가 유지된다.

See the Pen hover(자식선택자 활용) by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 23일차 복습 by psm817 (@psm817) on CodePen.