Question

在主页上，我希望用户将鼠标悬停在跨度上，并且当他们这样做时，跨度的内容也会发生变化，而背景也会发生变化。

我创建了一个数组来存储数据，更改文本和背景图像。我将以src文件为背景。

我找到了此代码段并对其进行了修改。我没有使用jQuery，所以innerHTML出现问题。我不知道在jsx中做什么。

悬停动作正在起作用，我做了一个控制台日志，但是在innerHTML部分中断了。

该阵列向上扩展了2个组件。

//-Home.js  
//--Hero.js  
//---HeroImageItems.js (this is where the code below resides)  

export class HeroImageItems extends Component {
  loopHeroTitle = () => {
    let list = this.props.heroImage.title;
    titleSequence(0);

    function titleSequence(i) {
      if (list.length > i) {
        setTimeout(function() {
          document.getElementById("hero-image-title").innerHTML = list[i];
          titleSequence(++i);
        }, 1000);
      } else if (list.length == i) {
        titleSequence(0);
      }
    }
  };

  render() {
    return (
      <div className="hero-image-bg">
        <p
          className="hero-image-title"
          id="hero-title-span"
          onMouseOver={this.loopHeroTitle}
          style={this.getActiveText()}
        >
          {this.props.heroImage.title}
        </p>
      </div>
    );
  }
}

HeroImageItems.propTypes = {
  heroImages: PropTypes.object.isRequired
};

export default HeroImageItems;

Answer 1

您输入了错误的ID。 document.getElementById（“ hero-image-title”）。innerHTML = list [i]; 是设置innerHTML的地方。

此p标签的ID为“ hero-title-span”

输入正确的ID，您应该就可以了！

反应：更改悬停时显示的文本

1 个答案: