사진에 마우스 hover 하면 버튼 기능 추가

728x90
반응형

* 필수조건 : 사진 클릭시 영화의 id 값 출력 

* 문제 : 사진에 hover했을때, 제목+요약+평점이 나오도록 설정했는데 id값 출력이 어려움

* 개선 : 안에 버튼을 추가하여 hover 후, 버튼 눌러서 id값 출력하도록 

(1) index.js

 const temp01 = document.createElement('div');
 temp01.innerHTML = `
            <a class="cardContainer">
    <div class="top">
        <div class="title"><strong>${originalTitle}</strong></div>
        <div class="index">${index}</div>
    </div>
    <div class="img">
        <div class="hoverTop">
            <div class="idBtn" ><button class="idBtn01" onclick="alert('영화 Id: ${id}')">영화 id 보기</button> </div>
`

innerHTML로 데이터 넣을때, button을 추가하였음

 

 

반응형