How to hide container div title when hovering inner elements?

Ask a question
2

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>
offer bounty
add comment

0 Answer

Your Answer