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


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

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

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

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

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

  • 2018년 05월 09일에 작성됨
    보는 재미가 있고 역동적인 페이지를 구현할 수 있는 프론트엔드 개발자가 되고 싶은 초보개발자

조회수 68


1 답변


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

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

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close