hover 시 img 여러개에 애니메이션을 주고싶습니다.

hover 시 img 여러개에 애니메이션을 주고싶습니다.

QA

hover 시 img 여러개에 애니메이션을 주고싶습니다.

본문

여러장의 image를 img 태그를 통해 12345 순으로 겹춰두고, 그 아래에 div > p태그를 통해 5연의 시를 각 연마다 ABCDE 클래스를 부여하여 웹을 구성하였습니다. A,B,D 클래스의 텍스트 위에 오버 시, img 태그의 이미지 135를 움직이고 싶은데 어떤식으로 해야될까요?

현재 body의 상태입니다


<body>
        <img id="background" src="image/Background.png">
        <img class="wave1 U" src=image/wave_1.png>  
        <img class="waves2 D" src=image/wave_2.png>
        <img id="stone" src="image/stone.png">
        <img class="wave3 U" src=image/wave_3.png>
        <img class="waves4 D" src=image/wave_4.png>
        <img class="wave5 U" src=image/wave_5.png>
        <div id="poetry">
            <h1><div id="title">그리움</div></h1>
            <h3><div id="name">청마 유치환</div></h3>
            <div class="content">
                    <p class="A">파도야 어쩌란 말이냐</p>
                    <p class="B">파도야 어쩌란 말이냐</p>
                    <p class="C">임은 뭍같이 까딱 않는데</p>
                    <p class="D">파도야 어쩌란 말이냐</p>
                    <p class="E">날 어쩌란 말이냐</p>
             </div>
        </div>
</body>

이 질문에 댓글 쓰기 :

답변 1

 <style>
        .wave{  
            height: 200px;
            width: auto;
        }
    </style>
    <img id="background" src="image/Background.png">
    <img class="wave U" src=image/wave_1.png>
    <img id="stone" src="image/stone.png">
    <div id="poetry">
        <h1><div id="title">그리움</div></h1>
        <h3><div id="name">청마 유치환</div></h3>
        <div class="content">
            <p class="A" data-src="https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg">파도야 어쩌란 말이냐</p>
            <p class="B" data-src="https://cdn.pixabay.com/photo/2015/09/09/16/40/ocean-931776_960_720.jpg">파도야 어쩌란 말이냐</p>
            <p class="C" data-src="https://cdn.pixabay.com/photo/2017/01/17/03/58/barefoot-1985858_960_720.jpg">임은 뭍같이 까딱 않는데</p>
            <p class="D" data-src="https://cdn.pixabay.com/photo/2017/04/06/17/43/water-2208931_960_720.jpg">파도야 어쩌란 말이냐</p>
            <p class="E" data-src="https://cdn.pixabay.com/photo/2017/07/31/21/45/sea-2561397_960_720.jpg">날 어쩌란 말이냐</p>
        </div>
    </div>
<script>
    $(document).ready(function () {
        $(".content p").hover(function () {
            var src = $(this).data('src');
            var $img = $("img.wave");
            if(src){

                $img.attr('src',src);

            }
        })
    })
</script>

 

img태그를 하나로 두고 src를 바꾸는건 어떠신가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT