Styled -component 고수님들 .. hover 시 이미지 변경 질문드립니다 ㅜ_ㅜ

Question

안녕하세요! 스타일 관련 질문입니다.한 이미지가 있고, hover 시에 다른 이미지로 변경하기를 원하는데요!//js //style export const GoToGithub = styled.img` &:hover { content: url('images/icon/github-bk.png'); } `;이렇게까지는 잘 변환이 되었습니다. 그런데 여기서 transition 을 주고 싶어서 (서서히 변환하는 효과) 안 해본 transition 이 없는데요 ...이게 이미지끼리 변환이어서 그런지 좀 버벅거리거나 혹은 잘 되다가 사라지거나 하는 등의 실패가 거듭되고 있습니다.. 그래서 이렇게 해야되나 싶기는 한데 더 어렵기만 합니다.. GPT 한테도 몇번을 물어봤는지 모르겠습니다ㅜ_ㅜ 도와주시면 정말 감사하겠습니다!!

doooss · Answer

해당 로직을 생각하시는 대로 한다면 작성하신 아래 코드와 같이 두개로 작성 한다음, onMouseEnter onMouseLeave 프로퍼티를 사용하고 해당 프로퍼티에 state 값을 true / false 로 트리거를 만든 다음 조건부로 렌더링 시키고, 트랜지션을 주입해야 원하시는 상황이 제대로 작동될 것으로 생각됩니다.다만, 애초에 github.png 와 github-bk.png 를 사용하시는 것으로 보아 아이콘이 호버시 색상이 반전을 원하시는 것 같습니다. 이미지를 바꾸는 것이 아닌 css filter를 사용하시는 것을 권장드립니다. css filter 중 invert , brightness 를 적당히 조합하면 원하시는 결과물을 얻을 수 있을 겁니다.ref. https://developer.mozilla.org/ko/docs/Web/CSS/filter

몰랑토끼 · Answer

img 태그를 hover 하면 컨텐츠가 바뀐다? 이거좀 이상한데요 이미지 컴포넌트를 쓰려면 svg 에 fill값을 props로 받게 하거나, 아니면 img태그 통째로 선언해야 편한데 트랜지션을 주려고 한다면 컴포넌트 설계자체가 지금 잘못되서 // TransitionIImg.js원본 img, 바뀔 img 경로 받고 트랜지션을 줘야되요. filter 는 디자인 없을때나 쓸만하지 디자인있는 상황이면 전혀 무쓸모여서 회사에 디자이너 없는 회사가 어딨습니까.. 이런게 있다 정도만 아세요.

Styled -component 고수님들 .. hover 시 이미지 변경 질문드립니다 ㅜ_ㅜ

2개의 답변

Q&A 목록