0

我使用 react 并有一个从 css 插入背景图像的 div。div 里面还有一个标题和几个元素。当将鼠标悬停在 div 上时，会显示标题，问题是当悬停在内部元素上时也会显示它：h1、按钮等。如何允许此功能在 div 上而不是在其内部元素上工作。

我尝试用内部元素标题覆盖 div 标题：title={""}，我尝试用 aria-label 覆盖它，它也不起作用。我尝试将图像取出到它自己的元素中，而不是从 css 中取出，但它需要 css 重组，我宁愿在 jsx 中找到解决方案。

    const {pageTitle, subTitle, mainImage, alternativeText} = this.props;;
    const containerStyles = { background: "url(" + mainImage + ") center center / cover no-repeat"};
    return (
        <div style={containerStyles} className={"heroLanding"} title={alternativeText}>
            <div className={"landingContainer"}>
                <h1 className={"landingTitle"}>
                    <span className={"landingTitle_small"}> {pageTitle} </span>
                    {subTitle}
                </h1>
                <div className={"heroLanding-listContainer"}>
                    <HeroList />
                </div>
            </div>
        </div>
4

1 回答 1

1

我将在这里使用一些非常简单的事件监听器。假设您使用的是类组件，我们可以使用状态变量将值提供给 div 的 title 属性。当我们进入landingContainer div 时，我们将给该标题一个空字符串。当我们离开landingContainer div 时，我们会将title 还给它原来的prop 值。

class Image extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            title: props.alternativeText
        }
    }

  handleOnMouseEnter = () => {
    this.setState({
      title: '',
    })
  }

  handleOnMouseLeave = () => {
    this.setState({
      title: this.props.alternativeText,
    })
  }


    render(){
    const {pageTitle, subTitle, mainImage, alternativeText} = this.props;;
    const containerStyles = { background: "url(" + mainImage + ") center center / cover no-repeat"};
    return (
        <div style={containerStyles} className={"heroLanding"} title={this.state.title}>
            <div 
                 className={"landingContainer"} 
                 onMouseEnter={this.handleOnMouseEnter} 
                 onMouseLeave={this.handleOnMouseLeave}
            >
                <h1 className={"landingTitle"}>
                    <span className={"landingTitle_small"}> {pageTitle} </span>
                    {subTitle}
                </h1>
                <div className={"heroLanding-listContainer"}>
                    <HeroList />
                </div>
            </div>
        </div>

    }
}

这是一个沙箱，向您展示它是如何工作的：https ://codesandbox.io/s/zxpnk301pl

于 2019-05-12T09:03:47.483 回答