title: How do i call jquery variables?
body: <p>This is very simple i am sure but i am new to jquery and am kinda stuck.</p>
  
  <p>I wrote this code which works perfectly:</p>
  
  <pre><code>function engageMaps(){
    $(".destinations #cancun").hover(
      function () {
        $(".image_map #cancunPin").addClass("active");
      },
      function () {
        $(".image_map #cancunPin").removeClass("active");
      }
    );
  };
  </code></pre>
  
  <p>Then I tried to break items out into variables to make it more flexible but can't get it to work. I wrote this:</p>
  
  <pre><code>function engageMaps(){
    var $destination = $(".destinations #cancun");
    var pin = $(".image_map #cancunPin");
    $destination.hover(
      function () {
        $pin.addClass("active");
      },
      function () {
        $pin.removeClass("active");
      }
  };
  </code></pre>
  
  <p>This should be exactly the same as the first code block. Any help is much appreciated thanks</p>