CODEWITHSUNDEEP
javascriptcssreactjs
user9667412
user9667412

Reputation:

How to hide text when a div translates over it on hover?

My preview div items are scaling on hover. What I want is to turn the opacity for title to zero when the first child is hovered upon. Is there any easy way to do this?

Right now it looks like this - https://i.ibb.co/mF64DdR/Screenshot-28.png

<div className="collection-preview">
<h1 className="title">{title.toUpperCase()}</h1>
  <div className="preview"> 
  {     
        movies
        ? (movieData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  {
        tvshow
        ? (tvData.map(({id, ...otherProps}) => <CollectionItem key={id} {...otherProps} />))
        : null
  }
  </div>
    </div>

Upvotes: 1

Views: 291

Answers (2)

sid
sid

Reputation: 363

You can just use CSS to hide any text on hover

.title:hover{
   display: none;
}

Upvotes: 1

Anton Bks
Anton Bks

Reputation: 492

You could try something like:

let title = document.querySelector('.title');
let preview = document.querySelector('.preview');
preview.addEventListener('mouseover', function(){
   title.setAttribute("style", "opacity:0;")
})

However, I would add a class to each CollectionItem so you could add the eventListener to each preview item instead of the parent.

If you are using react hooks you could also use useHover. https://usehooks.com/useHover/

Upvotes: 1

Related Questions