겹쳐져 있는 요소에 각각 적용되어 있는 hover 효과가 둘 다 적용되게 할 수 있나요?

  • 지금 UI가 특정 요소 2개가 아닌, 어느 요소끼리 겹쳐지게 되는지 알 수 없으며

  • 겹쳐진 요소 중 에 위치해 있는 요소를 제어할 수 있는 경우라면

  • 겹쳐져 있는 두 요소에 hover 효과가 적용되어 있을 경우

위에 위치한 요소의 hover 효과 뿐 만 아니라

겹쳐져 있는 두 요소에게 적용되어 있는 hover값이 모두 적용될 수 있도록 할 수 있는 방법이 있을까요?

1답변

  • css만으로는 어렵습니다. 코드도 더러워지고, 확장성이 정말떨어져서 추천하고싶지는 않지만 JavaScript를 이용해서 가능은 합니다.

    1. 해당 요소들의 css 스타일에 pointer-events: none;을 부여해서, css 상으로 hover가 동작하지 않도록합니다.
    2. 각각 요소들의 hover style을 별도의 class로 만듭니다. 예를들어 .btn-hover 이런식이겠죠.
    3. JavaScript를 활용하여 해당 요소들 hover되었을때, 각각 hover class가 추가되도록 합니다.

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.