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

Question

I'm working on a project that is using Intersection Observer to add animation to an element's style upon entry. However, what I'm noticing is that the : hover attribute no longer works when I apply the style. Am I doing this wrong, or, are these two not compatible? On the JS Fiddle, I've commented out the hover attribute by default. Try uncommenting it and see what happens.

I've tried banner.classList.add(/new class in here/) but that method also took away the :hover as well. DEMO: Demo

Answer 1

disable animation on hover because animations has a higher specificity

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