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而不使用它。所以我按照以下两个步骤解决了问题

1。。我的组件状态已更新为键为mouseEnter: {}

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>

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

1 个答案: