title: Check which element is hovered in React
body: <p>I'm building portfolio site for me with Gatsby + Wordpress. I wondered is it possible to hover name of portfolio item and image related to that?</p>
  
  <p>I have idea that if <code>PortfolioItemNameLink</code> is hovered it shows image from same project. How can I check which item is hovered?</p>
  
  <pre><code>const PortfolioItemsText = () =&gt; {
  
    return (
      &lt;StaticQuery
        query={graphql`
          {
            allWordpressWpPortfolio {
              edges {
                node {
                  id
                  slug
                  title
                  excerpt
                  content
                  featured_media {
                    source_url
                  }
                }
              }
            }
          }
        `}
        render={props =&gt; (
          &lt;Wrapper&gt;
            &lt;PortfolioImageWrapper&gt;
              {props.allWordpressWpPortfolio.edges.map(edge =&gt; (
                &lt;PortfolioImage
                  src={edge.node.featured_media.source_url}
                  alt="Thumbnail"
                /&gt;
              ))}
            &lt;/PortfolioImageWrapper&gt;
  
            &lt;PortfolioItemsWrapper&gt;
              &lt;PortfolioItems&gt;
                {props.allWordpressWpPortfolio.edges.map(portfolioItem =&gt; (
                  &lt;PortfolioItem
                    style={currentStyle}
                    key={portfolioItem.node.id}
                  &gt;
                    &lt;PortfolioItemNameLink
                      to={`/portfolio/${portfolioItem.node.slug}`}
                    &gt;
                      &lt;PortfolioItemNameLinkText&gt;
                        {portfolioItem.node.title}
                      &lt;/PortfolioItemNameLinkText&gt;
                    &lt;/PortfolioItemNameLink&gt;
                  &lt;/PortfolioItem&gt;
                ))}
              &lt;/PortfolioItems&gt;
            &lt;/PortfolioItemsWrapper&gt;
          &lt;/Wrapper&gt;
        )}
      /&gt;
    )
  }
  
  export default PortfolioItemsText
  </code></pre>
  
  <p>Here is screenshot from my project. When I hover title I would get right image visible and otherwise image should be not visible. 
  <a href="https://i.stack.imgur.com/Bd23I.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bd23I.jpg" alt="screenshot"></a></p>
  
  <p>Thanks in advance!</p>