title: How to show input button when hover over input text?
body: <h2>What I want to happen</h2>
  
  <ul>
  <li>When hover over <code>Worksheet-Problem</code> input text, I want <code>.button-add</code>
  to show up and the user be able to click on it. When the user hovers
  away from the <code>Worksheet-Problem</code> input text, I want <code>.button-add</code> to
  fade away. </li>
  <li>When hover over <code>.button-bullet</code>, I want <code>.button-bullet</code>
  to disappear and<code>.button-remove</code> to fade in its place</li>
  </ul>
  
  <p>I feel like this should be simple enough. I might be using the incorrect jQuery functions.</p>
  
  <h2>What is actually happening</h2>
  
  <p><code>.button-add</code> keeps blinking and coordination between<code>.button-remove</code> fadingIn and <code>.button-bullet</code> disappearing is a fail.</p>
  
  <p><em>Add Button Glitch</em>
  <a href="https://i.stack.imgur.com/1MLMa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1MLMa.gif" alt="enter image description here"></a></p>
  
  <p><em>Remove Button Glitch</em>
  <a href="https://i.stack.imgur.com/7EWRg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7EWRg.gif" alt="enter image description here"></a></p>
  
  <h2>My code</h2>
  
  <p>I set the <code>display</code> of the <code>.button-add</code> and <code>.button-remove</code> to <code>none</code>. And then I toggled their <code>display</code>, as well as <code>.button-bullet</code>'s <code>display</code>, using <code>fadeIn()</code> and <code>fadeOut()</code>.</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>.button-add, .button-remove{
      display: none;
  }
  </code></pre>
  
  <p><em>jQuery</em></p>
  
  <pre><code>$("input[type='text'][name='Worksheet-Problem']").focus(function(){
          $(".button-add").fadeIn(300);  
      })
      $("input[type='text'][name='Worksheet-Problem']").hover(function(){
          $(".button-add").fadeIn(300);
      })
      $("input[type='text'][name='Worksheet-Problem']").mouseout(function(){
          $(".button-add").fadeOut(300);
      })
      $(".button-bullet").hover(function(){
          $(this).hide();
          $(".button-remove").fadeIn(300);
      })
      $(".button-remove").mouseout(function(){
          $(this).fadeOut(300);
          $(".button-bullet").fadeIn(300);
      })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/14ongm/p6tegtcx/4/" rel="nofollow noreferrer">JSFiddle</a></p>