php 제이쿼리 질문이요
본문
박스에 백그라운드로 사진을 깔아놓고
첫번째 버튼에 마우스를 올리면 백그라운드 사진이 바뀌게꿈 하려고 합니다
css에도 background-image로 깔아놧습니다.
$("버튼").eq(0).hover(function({
$("박스").css("background-image", "../img/이미지")
});
이렇게 설정했는데 구현이 안되네요. ㅜㅜ 분명 로컬에선 잘됏는데... php파일은 뭐가 다른가요??
아니면 다른 방법으로 코드를 짜는게 나을까요..?
답변 1
※ 문제점 ;
- hover 함수의 콜백 함수에 괄호가 맞지 않아 문법 오류.
- CSS의 background-image는 경로 앞에 url()이 필요.
- 이미지의 경로를 정확히 설정.
<div class="박스">
<!-- 배경 이미지가 적용될 박스 -->
</div>
<button class="버튼">버튼</button>
/* 초기 배경 이미지 설정 */
.박스 {
width: 300px; /* 원하는 크기로 설정하세요 */
height: 200px; /* 원하는 크기로 설정하세요 */
background-image: url('../img/초기이미지.jpg'); /* 초기 배경 이미지 */
background-size: cover;
background-position: center;
}
$(document).ready(function() {
$(".버튼").eq(0).hover(
function() {
$(".박스").css("background-image", "url('../img/변경이미지.jpg')");
},
function() {
$(".박스").css("background-image", "url('../img/초기이미지.jpg')");
}
);
});
답변을 작성하시기 전에 로그인 해주세요.
