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를 바꾸는건 어떠신가요?
답변을 작성하시기 전에 로그인 해주세요.
