CODEWITHSUNDEEP
htmlcssreactjs
Itay Tur
Itay Tur

Reputation: 1679

How to hide container div title when hovering inner elements?

i work with react and have a div with background image inserted from the css. the div also has a title and several elements inside. when hovering over the div the title is shown, the problem is that it is shown also when hovering over the inner elements: h1, button, etc. how to allow this functionality to work on the div but not on it's inner elements.

i tried overriding the div title with the inner elements title: title={""}, i tried overriding it with aria-label, it didn't work also. i tried taking out the image into it's own element rather than from the css, but it requires css restructuring and i'd rather find a solution in the 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>

Upvotes: 0

Views: 674

Answers (1)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

I'll be making use of some really simple event-listeners here. Assuming you are using a class-component, we can use a state-variable to feed the value to the div's title prop. When we enter the landingContainer div, we will give that title an empty-string. When we leave the landingContainer div, we will give the title back its original prop value.

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>

    }
}

Here's a sandbox to show you how it works: https://codesandbox.io/s/zxpnk301pl

Upvotes: 1

Related Questions