sello
146
2019-06-30 16:24:54
3
137

jqeury사용해서 이미지를 hover하면 텍스트로 변경하는법 ㅜㅜ? (왕초보)


여러 음식사진들이 있구, 해당 사진에 마우스를 hover하면 해당 사진의 음식이름이 텍스트로 보이고

마우스 아웃일 경우 다시 사진으로 보이게 하구 싶은데요.. 이게 구현이 안되서 1주일을 헤매고 있어용..

제 생각엔 첨엔 이미지를 없애고 텍스트를 보이게 해야하는건가 싶어 이미지를 없앴는데 아예 이미지가 차지하던 공간까지 함께 없어져 이 접근방법이 아닌가... 싶은데  

제이쿼리 왕초보에게 어떤 방식으로 접근해야 할지 도움 좀 주시면 감사하겠습니다.ㅠㅠ 


HTML    

<img class="food_img" src=<c:url value="/resources/img/pizza.jpg"/>/> 

<img class="food_img" src=<c:url value="/resources/img/chicken.jpg"/>/> 



$(document).ready(function() {

    $('.pizza').hover(function() {

// 마우스 오버 일 경우 텍스트로 보이도록

}, function() {

// 마우스 아웃 일 경우 다시 사진이 보이도록

});

})

0
0
  • 답변 3

  • 시닙이
    665
    2019-06-30 16:51:49

    텍스트로 바뀌기전의 HTML를 저장하셨다가 ex ) let imgTem = <img  ... />

    let textTem = <span>...</span> 로 해당 이벤트시 innerHTML이나 그런것들로 바꿔줘도 될거강튼데요 

    0
  • 프리미엄
    199
    2019-06-30 19:36:02 작성 2019-06-30 19:36:26 수정됨
    1
  • sello
    146
    2019-06-30 21:31:45
    와우..감사합니다 .. ㅠㅠ ♥
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.