쌤.. hover시 css적용을 해주고싶은데 어떤 방법이있을까요?

인터랙티브 개발 실무 끝장내기 [역량 강화편]

다수의 파티클 자유롭게 다루기

작성

421

greensock 홈페이지에서 번역기 돌려가며 찾아도보고

나름대로 구글검색도 해봤는데 잘 모르겠습니다.

현재 혼자 복습겸 이미지api를 이용해서 랜덤으로 이미지를 뿌려주고, 이미지에 마우스를 올릴시 css변경을 해주었습니다.

section {
  position: relative;

  height: 100vh;
  width: 100vw;

  .image {
    position: absolute;
    cursor: pointer;
    width: 110px;
    height: 110px;
    border-radius: 50%;

    &:hover {
      opacity: 1;
      width: 300px;
      height: 300px;
      animation: up-down 2s infinite;
      transition: all 0.3s ease-in-out;
    }
  }
}

근데 다른 css는 먹는데 opacity값은 f12에서 확인해보면 적용이 안됩니다.

그러면 TweenMax에서 어떤식으로 해줘야할지 감이 잘 안잡힙니다 ㅠㅠ 도움 좀 부탁드려도될까요?

인터랙티브 웹 javascript

답변 2

밀크티

지나가던 사람입니다.

소스코드를 본 적이 없어서 확실 하진 않은데

hover시 opacity: 1을 주시고 싶다는 뜻은

호버 하지 않았을 때에는 .image의 opacity가 0.9 ~ 0까지 의 숫자로

약간 불투명한 상태여야 하는것 아닌가 합니다.

opacity: 0은 불투명도가 낮아져서 아예 안보이는 상태로 만들겠다는 뜻이고

opacity: 1은 불투명도를 높여서 원본대로 보이겠다는 의미입니다.

그리고 0.1 / 0.2 / 0.3 / 0.4 ... 등등 소숫점은 0부터 1까지의 불투명도를 단계적으로 세세하게 조정해서 주기 위한 수치이구요.

이미 .image 선택자는 별도의 opcity속성값이 부여되지 않았기 때문에 기본적으로 opacity: 1의 상태입니다.

그런 .image선택자를 hover를 했을때 opacity: 1를 부여하신다면 이미 동일한 상태이기 때문에 변화가 없는것이구요.

.image { opacity: 0.5;}

.image:hover {opacity: 1;} 로 하시거나

---

.image {}에는 opacity값을 주지 않고 지금처럼 그대로 두시고

.image:hover {opacity: 0.5;} 정도로 변경해서 테스트 해보세용.

코딩일레븐

지식공유자

감사합니다 ^^

반가우면반갑다고해

질문자

안녕하세요 질문자입니다.

css를 적용해봤는데 트윈맥스때문인지 opacity값만 적용이안되는 문제가있었습니다.

계속 삽질을하고 검색을 하며 아래 코드와같이 적용시켜서 해결했습니다.

 for (var i = 0; i < totalNum; i++) {
    item = document.createElement('img');
    item.setAttribute('class', 'image');
    item.style.top = window.innerHeight / 2 + 'px';
    item.style.left = window.innerWidth / 2 + 'px';
    item.src = `https://source.unsplash.com/collection/random${i}/1600x900`;
    section.appendChild(item);
    imageHover(item);
  }

  var _image = document.querySelectorAll('.image');

  function imageHover(el) {
    el.addEventListener('mouseenter', function () {
      TweenMax.to(el, 0.5, {
        autoAlpha: 1,
        ease: Power4.easenOut,
      });
    });

    el.addEventListener('mouseleave', function () {
      TweenMax.to(el, 0.5, {
        autoAlpha: 'random(.1,1)',
        ease: Power4.easenOut,
      });
    });
 }

이렇게 풀었습니다. 이 외의 더 좋은 방법 혹은 더 간단하게 구현하는 방법이있다면 의견주시면 정말 감사할것같습니다!

코딩일레븐

지식공유자

tweenMax를 사용하실거면 css에는 opacity 안 주셔도 됩니다.

tweenMax에서 autoAlpha만 사용하신다면 css로 해주셔도 될 것 같아요.

스크립트에서 제거를 하시고, 아래처럼 테스트해보세요

.image {
    position: absolute;
    cursor: pointer;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: .5; <- 기본 값을 주세요


    &:hover {
      opacity: 1;
      width: 300px;
      height: 300px;
      transition: all 0.3s ease-in-out
    }

  }

인프런 커뮤니티 질문&답변

쌤.. hover시 css적용을 해주고싶은데 어떤 방법이있을까요?