[Wecode 37일차] multi hover, 마우스 포인터 이벤트 막기

1. multi hover

아래 아이콘은 연필부분과 글씨가 나뉘어져 있다. 

<div className="wrap_review_recommend">
     <span className="detail_review" onClick={handleReviewClick}><FontAwesomeIcon className="icon_review" icon={faPencilAlt} size="lg" color="#bab4b4"/></span>
     <span className="detail_review_word">리뷰쓰기</span>
</div>

태그 구성이 위와 같이 될 경우 어떻게 호버를 먹여야하는가. 하나의 클래스당 하나만 하면 따로따로 호버가 되버리는데..

 

같이 호버를 하기 위해서는 

둘을 감싸고 있는 부모태그에 호버를 걸고 자식 태그의 클래스 네임으로 각각 설정해주면 동시에 먹힌다.

.wrap_review_recommend:hover .icon_review{       
   cursor: pointer;
   color: $homeColor;
}    

.wrap_review_recommend:hover .detail_review_word{       
   cursor: pointer;
   color: $homeColor;
}

2. pointer-events 

컴포넌트에 마우스 효과를 부여했고, 그 컴포넌트를 재사용하는데, 기존에 부여된 마우스 효과를 없애고 싶을 때 사용함.

 pointer-events: auto;  //비활성화된 이벤트 다시 작동
 pointer-events: none;  //커서 옵션 비활성화
 pointer-events: inherit;  //부모요소로부터 pointer-events 값 상속받음

3. Saas에서 @extend 사용하기.

@extend 사용시 주의사항은 사용하고자 하는 컴포넌트가 하나의 주제(ex) 버튼, 인풋창 등)일때만 사용할 것.

왜냐면, 상속을 통해서 연관성을 강제로 부여하기때문에 소스가 나중에 깨질 수 있다.

컴포넌트 연관성이 없다면,  mixin을 사용을 추천한다.

 

참고자료 : https://mytory.net/2016/12/23/when-to-use-extend-when-to-use-a-mixin.html