如何在一个元素上悬停在多个元素中暂停动画

Question

我试图在自定义侯爵中停止动画，当我徘徊在侯爵的一个元素上时， Note Marquee由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时，结果是一个元素stop aka content1，但另一个元素不断发展，动画不会暂停。有人可以帮助我这个

Answer 1

搜索问题后，我得出的结论是，我正在使用ReactJS，为什么我不使用它。所以我解决了两个步骤

的问题

1。更新了我的组件状态以具有mouseEnter: {}

的键

2。写2个处理程序以处理2个事件onMouseEnter和onMouseLeave在父级<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>