2023.08.25

CSS를 수정했다.

카드에 hover 할 시, 버튼이 나오는 곳에 svg 이미지를 추가했다. 

svg 이미지는 하얀색인데, hover를 하면 아무리 봐도 어두운 색으로 보였다.

 

svg 색

<path d="M13.1 12L8.5 7.4L9.9 6L15.9 12L9.9 18L8.5 16.6L13.1 12Z" fill="#FFFFFF"/>

 

잘 보일지 모르겠지만 자세히 보기 옆에 > 가 있다.

 

곰곰히 생각해보니, hover 시 img에 filter를 줘서 그런것 같다. not 태그를 이용해 svg에는 걸리지 않게 하자.

 

클래스 이름을 주고, Styled-components에서 not을 붙여준다.

<img className="viewDetail" src={viewDetail} alt="viewdetail" />

:hover img :not(.viewDetail) {
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      filter: brightness(0.2);
}

 

응?

분명 svg에 filter가 빠지긴 했다. 그러나 이미지에도 filter가 빠져버렸다. 이러면 안되는데?

 

:not(클래스 이름)은 그 요소에는 속성을 적용시키지 않는다는 뜻으로 알고있다. 그런데 왜 다른 요소까지 ??

 

z-index도 줘보고, 부모 요소를 추가했다, 뺐다가, 옮겼다가, 이것저것 시도 해 봤으나 여전히 배경 이미지까지 속성이 걸리지 않는다. 포기할까 하던 찰나 css를 지웠다가 다시 입력했는데

 

!

원하는대로 됐다! 

알고보니 처음 not을 붙일 때 띄어쓰기를 해버린 것!!!

 

:hover img :not(.viewDetail) { // img와 :not사이에 공백이 있다..
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      filter: brightness(0.2);
}

:hover img:not(.viewDetail) { // 이렇게 붙여서 사용해야 한다.
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      filter: brightness(0.2);
}

 

나의 2시간은 어디로 갔는가. 그래도 고쳐져서 기쁘다!