title: React - Show/hide when mouse hovers using hooks
body: <p>I'm trying to create a show/hide div for when my mouse enters and leaves the container. I was following this example here (<a href="https://upmostly.com/tutorials/react-onhover-event-handling-with-examples" rel="nofollow noreferrer">https://upmostly.com/tutorials/react-onhover-event-handling-with-examples</a>) but I've run into a problem when I hover my mouse over the 'delete-container' div, it disappears. This problem occurs because it takes the action onMouseLeave. Is there a way I can fix this or possibly make my solution better? Here is a demo of what is happening (<a href="https://i.gyazo.com/528d909625b6b3828325c4e62894d1c3.mp4" rel="nofollow noreferrer">https://i.gyazo.com/528d909625b6b3828325c4e62894d1c3.mp4</a>).</p>
  
  <pre><code>import React, { useState } from 'react';
  import axios from 'axios';
  
  export default function JobInfo({ jobs_info }) {
      const [isShown, setIsShown] = useState(false);
  
      const changeBackground = (x) =&gt; {
          x.target.style.backgroundImage =
              'linear-gradient(to right, #4639a7, #78019c)';
      };
  
      const changeBackground2 = (x) =&gt; {
          x.target.style.background = 'rgb(37, 45, 73)';
      };
  
      return (
          &lt;div className='row'&gt;
              &lt;div
                  className='container'
                  onMouseEnter={() =&gt; setIsShown(true)}
                  onMouseLeave={() =&gt; setIsShown(false)}
  
              &gt;
                  &lt;div className='row'&gt;
                      &lt;div className='job-title'&gt;{jobs_info.title}&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className='row wrapper'&gt;
                      &lt;div className='category-title'&gt;Category&lt;/div&gt;
                      &lt;div className='location-title'&gt;Location&lt;/div&gt;
                      &lt;div className='type-title'&gt;Type of Job&lt;/div&gt;
                      &lt;div className='creator-title'&gt;Job Creator&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className='row wrapper'&gt;
                      &lt;div className='category'&gt;{jobs_info.job_team.title}&lt;/div&gt;
                      &lt;div className='location'&gt;
                          {jobs_info.job_location.title}
                      &lt;/div&gt;
                      &lt;div className='type'&gt;{jobs_info.job_work_type.title}&lt;/div&gt;
                      &lt;div className='creator'&gt;{jobs_info.user.name}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div
                  className='counter-container'
                  id='counter-container'
                  onMouseEnter={changeBackground}
                  onMouseLeave={changeBackground2}
              &gt;
                  Candidates &lt;br /&gt;
                  {jobs_info.candidates_count}
              &lt;/div&gt;
              {isShown &amp;&amp; (
                  &lt;div className='delete-container center'&gt;
                      &lt;ion-icon id='trash' name='trash'&gt;&lt;/ion-icon&gt;
                  &lt;/div&gt;
              )}
          &lt;/div&gt;
      );
  }
  </code></pre>