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

조회수 1711회
  • 지금 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가 추가되도록 합니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)