마우스 오버 시 이미지 변화, 제이쿼리와 js 모두 사용할 수 있다.
혹시 코드를 짜다가 다음과 같은 오류가 발생했다면 참고하고,
그냥 코드가 궁금하다면 이 부분은 skip하고
해결 방법만 보면 된다!
오류 발생 : 이미지는 바뀌었지만 contents의 위치가 오락가락한다.
See the Pen Untitled by yeaseula (@yeaseula) on CodePen.
여기서 position:absolute와 display:none를 이용했는데
이들의 특징을 짚어보며 왜 오류가 발생했는지 이해 해 보자.
position:absolute를 적용시키면 그 태그는 본래의 위치를 잃고 가장 앞에 보여진다.
display:none은 흔적도 남기지 않고 없애버린다.
★ visibility:hidden은 흔적은 남겨준다.
위 코드는 마우스 hover 했을 때 display:none을 통해서 cat을 아예 흔적을 없애버렸다.
dog는 나타나긴 했으나 position:absolute가 적용되어
본래의 위치를 잃고 모든 태그들보다 우선적으로 보여지게된다.
즉, span태그는 왜 위치가 변하느냐?
cat이 흔적도 없이 사라졌고,
dog는 absolute로인해 본래의 자리를 잃어버리고 내가 제일 위에 보일거야~~~라며 마이웨이한다.
cat과 dog가 본래의 자리를 잃었기때문에 span이 그 자리를 차지하고 있는 것이다!
해결방법 1 ) html 을 통한 접근 : 이미지를 감싸는 div를 만든다.
See the Pen Untitled by yeaseula (@yeaseula) on CodePen.
두 개의 이미지를 감싸는 div를 만들어버리면
이미지가 div가 버티고 있기때문에 이미지에 absolute와 display:none을 사용하더라도
span이 움직이는 일은 없을 것이다.
다만,
div에 높이를 주지 않으면
첫 번째 이미지가 display:none되면서div까지 끌고 사라져 문제가 발생할 수 있다.
반응형 페이지가 아니라면 이 방법을 사용하는 것도 좋지만,
대부분의 페이지를 반응형으로 만들기때문에 이 방법은 적합하지 않을 수 있다.
해결방법 2 ) css를 통한 접근 : (position:absolute / visibility:hidden) 사용
See the Pen Untitled by kimyeaseul (@mog111) on CodePen.
visibility는 hidden되더라도 본래 자리는 남겨주는, 나름 친절한 성격이기때문에
굳이 이미지에 div를 씌우지 않아도 각각의 태그들을 자리보존하게 해준다.
개인적으로 제이쿼리를 사용한다면 방법2가 더 나은 것 같다.
해결방법 3 ) js를 이용한 접근
<style>
.box {
width: 원하는값넣기;
height: 원하는값넣기;
}
</style><body>
<div class="box" onmouseover="mouseover()" onmouseleave="mouseleave()">
<img src="img/best1.jpg" id="best1"> //이미지 경로 입력
</div>
</body> <script>
let best = document.getElementById('best1');
function mouseover (){
best.setAttribute("src","img/best2.jpg");
}
function mouseleave (){
best.setAttribute("src","img/best1.jpg");
}
</script>
js를 사용하니 코드가 훨씬 깔끔한 느낌이다!
개인적으로 될 수 있으면 js를 이용하는 걸 추천!
'개발 > javascript' 카테고리의 다른 글
| [jQuery]$(window).scroll() 활용 / scroll 이벤트 +예제 (0) | 2022.12.28 |
|---|---|
| 간단하게 마우스커서 이미지 변경 (다양한 조건에 따라 커서 커스텀 하기) (2) | 2022.12.15 |
| [javascript cart 구현하기]select 중복 선택 경고창 기능 만들어보기! (0) | 2022.12.11 |
| 배열에서 최소값 찾기 / 삭제하기 (apply, slice활용) (0) | 2022.12.11 |
| swiper 2개 연동 - 서로 크기가 다른 슬라이드일 때 (0) | 2022.11.06 |