title: how to toggle visibility of div on mouseover of another a tag
body: <p>I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:</p>
  
  <p><a href="http://www.bt.com/help/home/" rel="nofollow">http://www.bt.com/help/home/</a></p>
  
  <p>now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are</p>
  
  <pre><code>$("#function").on("mouseover",this, function () {
              $(this).addClass("show");
          })
          $("#function").on("mouseout",this, function () {
              $(this).removeClass("show");
              $(this).addClass("hide");
          })
  </code></pre>
  
  <p>Another is:</p>
  
  <pre><code>$("#function").hover(
                    function () {
                      $(this).addClass("hide");
                    },
                    function () {
                      $(this).removeClass("hide");
                    }
  
          );
  </code></pre>
  
  <p>and also</p>
  
  <pre><code>$("#butt").on("mouseover", this, function(){
                  $(this).find("div#function").show();
                  //$("#function").toggleClass("visible");
              });
              $("#butt").on("mouseout", this, function(){
                  $(this).find("div#function").hide();
                  //$("#function").toggleClass("visible");
              });
  </code></pre>