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

Question

我使用 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>

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