Intersection Observer Animation 和 Hover 效果不能一起工作吗？

Question

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

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

Answer 1

在 hover 上禁用 animation 因为动画具有更高的特异性

 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">