IE에서 hover이벤트가 제대로 동작하지 않습니다. 어떻게 해결해야 하나요?

Question

안녕하세요. 초보입니다. hover이벤트를 만들고 싶은데 크롬에서는 정상 작동하나IE에서 정상 작동하지 않는 문제 때문에 질문드립니다.(저는 IE11을 쓰고 있습니다.)크롬에서는 제대로 되는데 IE에서는 그리드 첫줄 첫째 칸에서만 hover가 안먹히고 있어요.다른 부분에서는 원하는대로 되고요. ㅠㅠ css의 :hover를 쓰다가 그래서 제이쿼리 기능으로 해보았는데 똑같은 문제가 생기네요grid의 문제인 것일까요? 문제가 일어나고 있는 모습입니다. http://thdthd2567.dothome.co.kr/worktype/static_menu.html 아래는 소스코드입니다. html SYKim page

home

work type

year
color
contact

illust

photography

graphic

etc

css(두 번째 파일) a{ text-decoration: none; text-align: center; } nav{ display: inline-block; grid-column: 1; -ms-grid-column:1; margin-left: 10%; } nav ul{ padding-left: 0; margin: 0; } nav li{ list-style: none; font-family: 'Raleway', sans-serif; border: 0.5px solid gray; padding: 15px; font-size: 1.2rem; margin: 10px; } .hoverevent{ color:white; background-image: url('img/transparent.png'); } #work_selected{ color:white; background-color: rgba(100,100,100,0.5); } #grid{ margin-top: 2%; display: grid; display: -ms-grid; grid-template-columns: 130px 1% 1fr; -ms-grid-columns: 130px 1% 1fr; } article{ grid-column: 3; -ms-grid-column:3; display: grid; display: -ms-grid; grid-template-columns: 45% 1% 45% 9%; -ms-grid-columns: 45% 1% 45% 9%; position:relative; } .sta_menu{ display: inline-block; text-align: center; padding-top: 18vh; padding-bottom: 18vh; } @media(max-width:500px){ #grid{ display: block; } article{ margin-left: 5%; grid-template-columns: 45% 0% 45% 5%; -ms-grid-columns: 45% 0% 45% 5%; } .sta_menu{ display: inline-block; text-align: center; padding-top: 10vh; padding-bottom: 10vh; margin-top: 2%; } nav{ display: block; margin-left: 0; text-align: center; } nav li{ width: 25%; display: inline-block; list-style: none; font-family: 'Raleway', sans-serif; border: 0.5px solid gray; padding: 7px; font-size: 1rem; margin: 3px; } }

초코쪼꼬 · Accepted Answer

illust

photography

graphic

etc

여기에 div가 필요한 이유가 있나요? --추가저 div(총 4개가 전부)들이 illust쪽에 위치하고 있기 때문에 첫번째 section이 hover가 정상적으로 먹히지 않고 있네요. div들이 필요가 없다면 z-index으로 제어해서 section을 튀어나오게 만들던지..아니면 position을 주어서 영역을 겹치게 하지 말던지.. 좋은방법이 있으면 그방법으로 겹치지 않게 해주세요. --추가이건.. 뭐 굳이 말해줄 필요는 없긴한데..

work type

여기 오류에요.

코로우 · Answer

우와 감사합니다! 다른 문제 때문에 씨름하다가 남은 div들이었는데 이게 이렇게 오류가 되는군요 ㅠㅠ 아래쪽은 어떻게 오류가 되는 것인가요? 막 기초 배운 후로 시작하는 것이라 바로바로 깨닫지 못하는 점 죄송합니다 ㅠㅠ

초코쪼꼬 · Answer

work type 페이지 들어가서 다시 work type 페이지 클릭해보세요.

코로우 · Answer

헉 그렇네요! 감사합니다!!!

IE에서 hover이벤트가 제대로 동작하지 않습니다. 어떻게 해결해야 하나요?

4개의 답변

Q&A 목록