inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

마우스 올리면 배경이미지 변경하기 with jQuery

jquery 배경이미지 변경 안됨.

1045

조은별

작성한 질문수 3

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' :''
    })
})

jquery HTML/CSS

답변 1

0

코딩웍스(Coding Works)

<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');

class 값 한 번에 부여하는법

2

95

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

80

1

div#css-checker-widget의 해결방

1

71

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

97

2

강의듣는법

1

87

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

77

2

input checked 질문합니다.

0

82

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

154

2

Part 1 영상 안나옵니다

1

101

1

제이쿼리 작동이 안됩니다

1

214

3

강의 내용 질문있습니다.

1

134

2

일정 부분만 주석하는 방법

1

229

2

폰트어썸

1

146

2

인접선택자에 대한 질문드립니다!

1

135

2

delay 적용 안됨

1

139

1

rotateY(360deg)가 적용이 안됩니다!

1

193

2

세로이동할때 height값

1

143

2

폰트어썸이 안되요..

1

510

2

화면 정중앙에 오게끔 할수있나요?

1

176

1

어코디언 네비게이션 중

1

130

1

라이브서버 문제

1

250

2

넷플릭스 어코디언 예제 질문

1

108

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

166

1

active 관련 질문

1

152

2