-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
jquery 배경이미지 변경 안됨.
22.03.24 11:52 작성 조회수 787
1
jquery부분에서 css background-image 적용이 안되네요.. 어디가 문제일까요..?
<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> ex5. 마우스 올리면 배경이미지 변경하게 with JQuery</title>
<link rel="stylesheet" href="../CSS/ex5.css">
</head>
<body>
<div class="container">
<!-- ul : 좀 더 섬세하게 해야 함. (before, after 사용 필요)
따라서, div - a태그만 쓰는 것보다, ul - li - a 태그를 써주는 것이 필요 -->
<ul class="nav">
<!-- a태그 내 텍스트 : white
data-text 텍스트 : 마우스가 올라갔을 때 yellow-green으로 채워짐. -->
<!-- li는 줄을 바꾸는 역할 (a태그는 가로배치됨 - 그러면 display:block을 줄 것임. 이 경우 텍스트 양 만큼 채워놓지 못함. )-->
<li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-01.jpg">
<a href="#none" data-text="ABOUT">ABOUT</a>
</li>
<li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-02.jpg">
<a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a>
</li>
<li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-03.jpg">
<a href="#none" data-text="CLASS">CLASS</a>
</li>
<li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-04.jpg">
<a href="#none" data-text="LOCATION">LOCATION</a>
</li>
</ul>
<!-- photo가 nav보다 앞에 있으므로, z-index를 줄 필요가 없음. 가장 뒤에 존재. ㅇ-->
<div class="photo"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../jquery/ex5.js"></script>
</body>
</html>
<CSS>
/* 구글폰트 - Fredoka */
@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Nanum+Pen+Script&display=swap');
/* Google Web Fonts CDN */
/* font-family: 'Noto Sans KR', sans-serif */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
body{
font-family: Fredoka;
margin:0;
color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* background-color: #000; */
}
a{
text-decoration: none;
color: #222;
}
.container{
}
.photo{
background-image: url('../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-initial.jpg');
background-repeat : no-repeat;
background-position: center center;
background-size:cover;
/* 독립 속성으로 작성 : 이유 ) Jquery에서 bakcground-image만 변경하기 위함
(background는 이 모든것을 한번에 쓸 수 있음) */
position: absolute;
top:0; left:0;
width: 100%; height: 100%;
transition:0.5s;
}
.nav{
}
.nav li{
list-style: none;
}
.nav li a{
color: #fff;
position: relative;
font-size: 4em;
z-index:100;
}
.nav li a:before{
position: absolute;
top: 0; left: 0;
width: 0;
overflow: hidden; /* 감춰지도록 */
content:attr(data-text); /* a태그의 data-text 내용을 받아옴 */
color: yellowgreen;
transition:0.5s;
}
.nav li a:hover:before{
width: 100%;
}
<JQUERY>
// mouseenter = hover
$('.nav li').mouseenter(function(){
var changeImage = $(this).attr('data-image')
// data-img는 변수가 아니고 속성이기 때문에, ' ' 내에 입력되어야 함.
$('.photo').css({
'background-image':'url('+ changeImage +')'
});
})
$('.nav li').mouseleave(function(){
$('.photo').css({
'background-image' :''
})
})
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.03.24
<link rel="stylesheet" href="../CSS/ex5.css">
폴더명은 소문자로 하세요.
<script src="../jquery/ex5.js"></script>
파일구조를 심플하게 하셔야 합니다.
background-image: url('../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-initial.jpg');
이미지 경로를 위에처럼 하시면 절대 안됩니다. 아래처럼 해야 합니다.
background-image: url('images/portrait-initial.jpg');
폴더구조를 아래처럼 하시고 다시 해보세요.
배경이미지-호버이펙트
index.html
style.css
custom.js
/images
위에처럼 폴더구조를 하면 아래처럼 실수 없이 파일을 링크할 수 있습니다.
<link rel="stylesheet" href="style.css">
<script src="custom.js"></script>
background-image: url('images/portrait-initial.jpg');
답변 1