CODEWITHSUNDEEP
javascriptcssreactjs
Shane Harley
Shane Harley

Reputation: 63

Elements blocking div I'm trying to hover on?

Absolutely stumped here...

I have a dynamically generated list of divs. It goes through each of those divs and applies an event listen on hover. Inside each of those divs is some text, a H1, some body copy and a link. Unfortunately the trigger only fires if I hover on a bit of 'blank space' in the div where there's no text.

I've tried pointer-events:none which does fix the issue but doesn't solve an issue where I have a link. Essentially I just want the whole div to respond when hovered. I swear I've done this before?!

Here's a video demonstrating: Video Recording

Here's how my JS is set up (the projectsText is getting each project element)

    projectsText.forEach(project => {
      project.classList.remove("active")
    })
    event.target.classList.add("active")
  }

  const changeWorkImage = (event) => {
    projects.forEach(image => {
      if (image.id === event.target.id) {
        workImage.style.backgroundImage = "url(" + image.heroImage + ")"
      } else {
        return
      }
    })
  }

  projectsText.forEach(project => {
    project.addEventListener('mouseover', (event) => {
      changeWorkImage(event)
      changeActive(event)
    })
  })

And how my component is structured

    <div className="project" id={id}>
      <p className="company">{company}</p>
      <h2 className="title">{title}</h2>
      <LearnMore url={url} />
    </div>

Upvotes: 0

Views: 55

Answers (1)

tmdesigned
tmdesigned

Reputation: 2254

The mouseover event goes to one, and only one, event handler at a time. It gives priority starting with the innermost child (nested/z-index). If you move the cursor from a parent ("project") to one of its children ("title"), then the parent loses the focus of the mouseover event.

There is a similar event, mouseenter which ignore transitions within an element. In other words, it doesn't pay attention when you move the mouse over children elements, so it in effect works from the outside in. This may work better in your case. (The converse, mouseleave, can be used to detect when the mouse has left.)

Upvotes: 1

Related Questions