css - 如何在将鼠标悬停在一个元素上时暂停多个元素中的动画？

Question

我试图停止自定义选取框内的动画，当我将鼠标悬停在选取框的一个元素上时， 注意选取框由 2 个内容组成，因此它会变成一个循环，而不是从头开始。

这是我的代码:

<div className="cg-container large" style={{width: '100%', backgroundColor: 'rgb(255, 255, 255)'}}>
  <div className="cg-widget">
    <div className="cg-marquee">
      <span id="stop-anima" className="cg-marquee-content-1">
        <div className="cg-flex cg-flex-row">
          <a href="https://www.coingecko.com/resource_redirect?locale=en&amp;route=coins/bitcoin&amp;utm_source=www.coingecko.com&amp;utm_medium=coin_price_marquee_widget&amp;utm_content=bitcoin" rel="noopener noreferrer" target="_blank" className="cg-py-2 cg-px-3 cg-flex cg-coin-row cg-sm">
            <div className="cg-flex cg-items-center">
              <img src="https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579" alt="BTC" className="cg-mr-2"/>
              <span><span className="cg-bold">Bitcoin</span> (BTC)</span>
            </div>
            <div className="cg-ml-2 cg-flex cg-justify-end cg-items-center cg-primary-color-dark">
              <div style={{marginLeft: '20px'}} >
                <span className="cg-bold">$3,825.97</span><span>(0.45%)</span>
              </div>
              <div className="cg-ml-2 cg-arrow-up"></div>
            </div>
          </a>
          <div className="cg-flex cg-items-center">
            <a href="/" className="cg-bold cg-sm cg-px-3">NEXT CONTENT OF MARQUEE</a>
          </div>
        </div>
      </span>
      <span id="stop-anima" className="cg-marquee-content-2">
        <div className="cg-flex cg-flex-row">
          <a href="https://www.coingecko.com/resource_redirect?locale=en&amp;route=coins/bitcoin&amp;utm_source=www.coingecko.com&amp;utm_medium=coin_price_marquee_widget&amp;utm_content=bitcoin" rel="noopener noreferrer" target="_blank" className="cg-py-2 cg-px-3 cg-flex cg-coin-row cg-sm">
            <div className="cg-flex cg-items-center">
              <img src="https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579" alt="BTC" className="cg-mr-2"/>
              <span><span className="cg-bold">Bitcoin</span> (BTC)</span>
            </div>
            <div className="cg-ml-2 cg-flex cg-justify-end cg-items-center cg-primary-color-dark">
              <div style={{marginLeft: '20px'}} >
                <span className="cg-bold">$3,825.97</span><span>(0.45%)</span>
              </div>
              <div className="cg-ml-2 cg-arrow-up"></div>
            </div>
          </a>
          <div className="cg-flex cg-items-center">
            <a href="/" className="cg-bold cg-sm cg-px-3">NEXT CONTENT OF MARQUEE</a>
          </div>
        </div>
      </span>
      </div>
    </div>
</div>

这里是要暂停的css部分

#stop-anima:hover {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
 }

当我尝试使用 id="stop-anima" 或 className 结果是一个元素停止 AKA content1 例如，但是另一个元素继续运行，动画不会暂停。有人可以帮我吗

Answer 1

在搜索问题之后，我得出结论，我正在使用 reactjs 为什么我不使用它。 所以我按照 2 个步骤解决了这个问题

1. 将我的组件状态更新为具有 mouseEnter: {} 的键

2. 编写 2 个处理程序来处理 2 个事件 onMouseEnter和 onMouseLeave在 parent <div>

就是这样，我需要做的就是最后的代码:我达到了

this.state = {
 mouseEnter:{}
}

handleMouseEnter = () => {
    this.setState({
      mouseEnter: {
        animationPlayState: 'paused'
      }
    })
  }

  handleMouseLeave = () => {
    this.setState({
      mouseEnter: {}
    })
  }

<div className="cg-container large" style={{width: '100%', backgroundColor: 'rgb(255, 255, 255)'}}>
  <div className="cg-widget">
    <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} className="cg-marquee">
      <span style={this.state.mouseEnter} className="cg-marquee-content-1">
        <div className="cg-flex cg-flex-row">
          <a href="https://www.coingecko.com/resource_redirect?locale=en&amp;route=coins/bitcoin&amp;utm_source=www.coingecko.com&amp;utm_medium=coin_price_marquee_widget&amp;utm_content=bitcoin" rel="noopener noreferrer" target="_blank" className="cg-py-2 cg-px-3 cg-flex cg-coin-row cg-sm">
            <div className="cg-flex cg-items-center">
              <img src="https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579" alt="BTC" className="cg-mr-2"/>
              <span><span className="cg-bold">Bitcoin</span> (BTC)</span>
            </div>
            <div className="cg-ml-2 cg-flex cg-justify-end cg-items-center cg-primary-color-dark">
              <div style={{marginLeft: '20px'}} >
                <span className="cg-bold">$3,825.97</span><span>(0.45%)</span>
              </div>
              <div className="cg-ml-2 cg-arrow-up"></div>
            </div>
          </a>
          <div className="cg-flex cg-items-center">
            <a href="/" className="cg-bold cg-sm cg-px-3">NEXT CONTENT OF MARQUEE</a>
          </div>
        </div>
      </span>
      <span style={this.state.mouseEnter} className="cg-marquee-content-2">
        <div className="cg-flex cg-flex-row">
          <a href="https://www.coingecko.com/resource_redirect?locale=en&amp;route=coins/bitcoin&amp;utm_source=www.coingecko.com&amp;utm_medium=coin_price_marquee_widget&amp;utm_content=bitcoin" rel="noopener noreferrer" target="_blank" className="cg-py-2 cg-px-3 cg-flex cg-coin-row cg-sm">
            <div className="cg-flex cg-items-center">
              <img src="https://assets.coingecko.com/coins/images/1/large/bitcoin.png?1547033579" alt="BTC" className="cg-mr-2"/>
              <span><span className="cg-bold">Bitcoin</span> (BTC)</span>
            </div>
            <div className="cg-ml-2 cg-flex cg-justify-end cg-items-center cg-primary-color-dark">
              <div style={{marginLeft: '20px'}} >
                <span className="cg-bold">$3,825.97</span><span>(0.45%)</span>
              </div>
              <div className="cg-ml-2 cg-arrow-up"></div>
            </div>
          </a>
          <div className="cg-flex cg-items-center">
            <a href="/" className="cg-bold cg-sm cg-px-3">NEXT CONTENT OF MARQUEE</a>
          </div>
        </div>
      </span>
      </div>
    </div>
</div>