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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

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를 바꾸는건 어떠신가요?

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 73,335 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT