코드펜에선 문제가 되지 않는 hover ㅜㅜㅜㅜ
선배님들! 이걸 그대로 코드펜에 가져가면 작동이 잘되는데요 ㅜ 제 라이브 서버에선 이미지호버시 어둡게 변하는것은 문제없는데 보여주고 싶은 텍스트가 안나와요ㅠ 어떤부분을 봐야하나요? css,js 연결 문제 없구요. html 하단에 js 로드시켯구요 ㅠ hover가 아예 안되면 모르겟는데 텍스트만 안뜨니..개발자 도구엔 이것 관련 에러도 없습니다 정말 모르겠어요ㅜㅠㅜㅠㅜ
//html
장소와 시간의 유연성
메타버스 교육은 지리적 제약이 없으며 언제 어디서나 접근할 수 있으므로 학습자들에게 유연성을 제공합니다.
.MetaverseImgLeftImg img:hover { transition: 0.3s ease-out; transform: scale(1.1); filter: brightness(0.2); }
.MetaverseImgLeftTxt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; width: 340px; text-align: center; border: 1px solid #fff; padding: 20px; display: none; } //js
document.addEventListener('DOMContentLoaded', () => { const hoverImg = document.getElementById('hoverImg'); const LeftTxt = document.querySelector('.MetaverseImgLeftTxt'); hoverImg.addEventListener('mouseenter', () => {
LeftTxt.style.display = 'block'; });
hoverImg.addEventListener('mouseleave', () => { LeftTxt.style.display = 'none'; }); }); 긴 글 죄송합니다 ㅠㅜㅜㅜㅜ
답변 2개
다음처럼 z-index 의 크기를 임의로 높여 확인해보는 방법이 있습니다.
</p>
<p>.MetaverseImgLeftTxt {</p>
<p> ...</p>
<p> z-index: 9999;</p>
<p>}</p>
<p>확인이 완료되는 경우 적당한 z-index 수치로 변경 하는것이 좋습니다.
z-index 를 무분별하게 사용할 경우 다음번 비슷한 상황에서 또 문제가 생길수 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
이것만 봐선 잘 모르겠네요 실제로 보면서 체크해보는거아니면
텍스트가 zindex 아래로 되어있거나
javascript 단에서 console 찍어보시면서 어디서 막히는지 체크해보거나 해야할듯?
답변에 대한 댓글 2개
LeftTxt.style.display = 'none'; 여기위에 console.log('22');
이런식으로 어디가 찍히고 안찍히는지봐서
근처에서 막히는것있으면 거기가 보통 문제입니당
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 배운지 얼마 안되서리 ㅠㅜ 콘솔을 어떤걸 찍어봐야해요? 혹시 콘솔에 다른 에러가 나오고 있는 상황이면 이것도 영향을 받을까요? 넘 초보적인 질문이라 지송함다 ㅜㅡㅠ