3

I'm trying to simulate a hover effect for my component. However, the onMouseEnter / Leave events are not working as expected, right now I'm trying to get it to simply console.log a string to check that its working but nothing is happening. The aim is that I can change its background color on hover; I tried setting this through a CSS class:hover but to no avail. How do I get the OnMouseEnter / onMouseLeave to function properly? here's the code:

import React from "react"
import ReactDOM from "react-router-dom"

class OnScrollComponent extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      open: false,
      firstTransitionPosition: 0,
      scrollAppearanceAjustment: this.props.scrollAppearanceAjustment || 250
    }
    this.handleScroll = this.checkForScroll.bind(this)
    this.hasBeenSet = false
  }

  checkForScroll() {
    if (window.scrollY >= this.state.firstTransitionPosition && this.hasBeenSet == false) {
      console.log("this event is triggering")
      console.log(this.state.firstTransitionPosition)
      this.setState({open: true})
      this.hasBeenSet = true
    }
  }

  mouseEnter() {
    console.log("hello, the mouse is here")
  }

  mouseExit() {
    console.log("bye bye, the mouse is gone")
  }

  componentDidMount(){
    var transitionComp = this.refs.moveMe
    var topOfElement = transitionComp.getBoundingClientRect().top
    var heightOfElement = transitionComp.getBoundingClientRect().height
    this.setState({firstTransitionPosition: topOfElement - heightOfElement - this.state.scrollAppearanceAjustment}, () => {
      this.checkForScroll()
    });
    window.addEventListener('scroll', this.handleScroll);

  }

  componentWillUnmount(){
       window.removeEventListener('scroll', this.handleScroll);
  }

  render(){
    return(
        <div ref="moveMe" onMouseEnter={this.mouseEnter}  onMouseLeave={this.mouseExit}
        className={`OnScrollComp ${this.state.open ? "visible" : ""}`} id={this.props.id}>
          {this.props.description} {this.props.link}
        </div>
    )
  }
}

module.exports = OnScrollComponent;

and the CSS for the components class:

.OnScrollComp {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  opacity: 0;
  transition: opacity 3s;
  pointer-events:none;
}



.OnScrollComp.visible {
  opacity: 1;
  pointer-events:none;
}

Thanks in advance for the help!

hyper0009
  • 236
  • 1
  • 11
  • @T4rk1n thats really weird, I don't get any output what so ever on my web console when running the actual site, how is this possible? – hyper0009 Jul 22 '17 at 20:46
  • @hyper0009 That is because T4rk1n added `width`, `height`, and `background-color` to the rendered component. Check the render method of your component in his fiddle. – DavidDomain Jul 22 '17 at 20:49
  • @DavidDomain Actually, I read too fast and just copied the js and not the css and modified the div to contain style. When I added the css and original code it doesn't work. – T4rk1n Jul 22 '17 at 20:50
  • @T4rk1n Ah, OK. Well, you fixed it anyway. ;) Go ahead and post it as an answer. – DavidDomain Jul 22 '17 at 20:52
  • @DavidDomain That was not the problem, I got the real answer coming. – T4rk1n Jul 22 '17 at 20:54
  • @DavidDomain your right, adding the CSS to the fiddle breaks it, I've been pulling my hair for some time, looking forward to an answer :) – hyper0009 Jul 22 '17 at 20:57

1 Answers1

4

In your css you have pointer-events: none;, this disable the mouse events from happening. Remove them and it works.

fiddle

.OnScrollComp {
  border-style: solid;
  border-color: black;
  border-width: thick;
  width: 600px;
  height: 300px;
  opacity: 0;
  transition: opacity 3s;
}



.OnScrollComp.visible {
  opacity: 1;
}
T4rk1n
  • 1,380
  • 12
  • 15