실전퍼블리싱 with jQuery(마우스 올리면 배경이미지 변경하기)

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

---

예제보기

Q) 왜 data-img 속성을 .navi li a에 넣지 않고 .navi li에 넣었나요?

data-image="images/portrait-01.jpg"를 a태그 안에 넣지 않고 li에 넣은 것은 a태그 내부가 너무 길어져서 입니다.

특별한 의미는 없습니다. a태그로 data-img속성을 옮기면 아래 처럼 스크립트의 선택자를 바꿔주면 됩니다.

<li><a href="#none" data-img="images/portrait-01.jpg" data-text="어바웃">어바웃</a></li>

$('.navi li a').mouseenter(function(){...}$('.navi li a').mouseleave(function(){...}

Q) 한글을 입력할 경우 글씨 하나 하나가 줄바꿈이 됩니다.

한글의 경우나 띄어쓰기가 있는 경우 자동 줄바꿈이 일어납니다.

그래서 자동줄바꿈을 하지 않게 white-space: nowrap; 속성을 추가하시면 됩니다.

참고로 한글이 입력되면서 a와 a:before의 높이가 살짝 안맞을거에요.

이런 부분을 해결하는건 a를 inline-block으로 변경해주세요. 그래서 크기값을 갖게 해주세요.

a를 block으로 변경하지 않는건 a의 너비가 100%가 되는 것을 방지하기 위해서 입니다.

.navi li a { display: inline-block; }

.navi li a:before {
  white-space: nowrap; 
  /* 텍스트가 넘쳐도 자동으로 줄바꿈 하지 않음 (기본값은 normal) */
}

HTML

  <div class="container">
    <div class="photo"></div>
    <ul class="navi">
      <li data-img="../images/portrait-01.jpg"><a href="javascript:viod(0)" data-text="ABOUT">ABOUT</a></li>
      <li data-img="../images/portrait-02.jpg"><a href="javascript:viod(0)" data-text="INSTRUCTOR">INSTRUCTOR</a></li>
      <li data-img="../images/portrait-03.jpg"><a href="javascript:viod(0)" data-text="CLASS">CLASS</a></li>
      <li data-img="../images/portrait-04.jpg"><a href="javascript:viod(0)" data-text="LOCATION">LOCATION</a></li>
    </ul>
  </div>

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
a {
  text-decoration: none;
  color: #fff;
}

.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('../images/portrait-initial.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: 0.5s;
}
.navi {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 100;
}
.navi li a {
  font-size: 4em;
  position: relative;
  font-weight: 500;
}
.navi li a::before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  color: yellowgreen;
  top: 0;
  left: 0;
  width: 0;
  transition: 0.5s;
}
.navi li a:hover::before {
  width: 100%;
}

JS

$('.navi li').mouseenter(function () {
  let changeImage = $(this).attr('data-img')
  $('.photo').css({
    'background-image': 'url(' + changeImage + ')'
  })
})
$('.navi li').mouseleave(function () {
  $('.photo').css({
    'background-image': ''
  })
})