Question

我与react一起工作，并从css中插入了一个带有背景图像的div。 div中也有标题和几个元素。将鼠标悬停在div上时会显示标题，问题在于，将鼠标悬停在内部元素（h1，button等）上时也会显示标题。如何允许此功能在div上起作用，而不是在其内部元素上起作用。

我尝试用内部元素title覆盖div标题：title = {“”}，我尝试用aria标签覆盖它，但是它也没有用。我尝试将图像提取到它自己的元素中，而不是从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>

Answer 1

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

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

悬停内部元素时如何隐藏容器div标题？

1 个答案: