CODEWITHSUNDEEP
htmlcssreactjshovermouseleave
Philip Kroupoderov
Philip Kroupoderov

Reputation: 65

MouseLeave event not firing for anchor elements

I have a link to a codepen and the problem is best observed in Chrome:

https://codepen.io/pkroupoderov/pen/jdRowv

The mouseLeave event does not fire sometimes when a user quickly moves the mouse over multiple images, meaning that some images will still have the grayscale filter applied. How to fix that? If I use a div instead of an anchor element it works totally fine. Should I slightly change the markup or apply certain styles to the anchor element? Or maybe should I use some component from React-Bootstrap instead?

I'm trying to create an overlay effect on an image when a user hovers over one just like on Instagram. I will add the content to the overlay later I just need to solve that mouseLeave event issue.

const imageUrls = [
  'https://farm8.staticflickr.com/7909/33089338628_052e9e2149_z.jpg',
  'https://farm8.staticflickr.com/7894/46240285474_81642cbd37_z.jpg',
  'https://farm8.staticflickr.com/7840/32023738937_17d3cec52f_z.jpg',
  'https://farm8.staticflickr.com/7815/33089272548_fbd18ac39f_z.jpg',
  'https://farm5.staticflickr.com/4840/40000181463_6eab94e877_z.jpg',
  'https://farm8.staticflickr.com/7906/46912640552_4a7c36da63_z.jpg',
  'https://farm5.staticflickr.com/4897/46912634852_93440c416a_z.jpg',
  'https://farm5.staticflickr.com/4832/46964511231_6da8ef5ed0_z.jpg'
]

class Image extends React.Component {
  state = {hovering: false} 

  handleHover = () => {
    this.setState({hovering: true})
  }
  handleLeave = () => {
    this.setState({hovering: false})
  }

  render() {
    if (!this.state.hovering) {
      return (
        <div onMouseOver={this.handleHover}>
          <img src={this.props.url} alt='' />
        </div>
      )
    } else {
      return ( // works fine when using <div> tag instead of <a> or <span>
        <a href="#" style={{display: 'block'}} onMouseLeave={this.handleLeave}>
          <img style={{filter: 'opacity(20%)'}} src={this.props.url} alt='' />
        </a>  
      )
    }
  }
}

const Images = () => {
  return (
    <div className="gallery">  
      {imageUrls.map((image, i) => {
        return <Image key={i} url={image} />
      })}
    </div>
  )
}

ReactDOM.render(<Images />, document.getElementById('app'))

Upvotes: 3

Views: 299

Answers (1)

henrik123
henrik123

Reputation: 1683

You can achieve this use pure css, no need to use Javascript. 

a {
   display: block;
}

a:hover {
   filter: opacity(.2);
}

Upvotes: 0

Related Questions