javascript - 交叉口观察者动画和悬停效果不能一起使用吗？

Question

我正在开发一个元素，该元素使用 Intersection Observer 在输入时向元素的样式添加动画。但是，我注意到，当我应用该样式时，:hover 属性不再起作用。我做错了吗，或者这两者不兼容？在 JS Fiddle 上，我默认注释掉了 hover 属性。尝试取消注释，看看会发生什么。

我已经尝试过 banner.classList.add(/new class in here/) 但该方法也取消了 :hover 。演示: Demo

Answer 1

禁用悬停动画，因为动画具有更高的特异性

const options = {
  root: null,
  threshold: 1,
};

const banner = document.querySelector('.product-banner');

const observerAnim = new IntersectionObserver(function(entries, observer) {

  entries.forEach(entry => {

    if (!entry.isIntersecting) {
      return;
    }
    banner.style.animation = '1s ease-in-out home-page-fade';
    banner.style.animationFillMode = 'forwards';
    observer.unobserve(banner);
  });

}, options);

observerAnim.observe(banner);

body {
  background-color: #fff;
  min-height: 2000px;
}

img.product-banner {
  opacity:0;
  position: relative;
  top: 1000px;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

@keyframes home-page-fade {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


img.product-banner:hover {
  animation: none !important;
  opacity: 0.8;
  transform: scale(0.9);
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;

}

<h1>
    Scroll Effect
  </h1>

  <img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">