title: jQuery bind hover and click functions
body: <p>I have a map with individual numbered facilities marked with a dot that changes color when hovered or selected. When selected, text in a separate container changes content depending on which facility is selected. </p>
  
  <p>I also have a legend of the numbers under the map. When the legend text is clicked, it also changes the text content of the container. Clicking on either the dot or legend individually works fine changing the color of the hovered and selected dots or legend text.</p>
  
  <p>Now I'm trying to combine the effect of hovering over/clicking the dot to trigger the associated legend text to hover/become selected and vice-versa.</p>
  
  <p>This is my very first attempt at jQuery so please be understanding! I've only been at this about a day. Reading as much as I can -- this is probably an easy solution, but I'm not seeing it. I tried making a new variable combining the dot and legend text and linking them through the shared facility name and that didn't work. I thought the on (bind) command would link the actions together, but that didn't work either. Any suggestions would be so greatly appreciated. Thanks in advance!</p>
  
  <p>code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="map_container"&gt;
  &lt;a class="dot" style="left: 315px; top: 189px;" facility="bldg4" work="bldg4work"&gt;&lt;/a&gt;
  &lt;a class="dot" style="left: 514px; top: 188px;" facility="bldg7" work="bldg7work"&gt;&lt;/a&gt;
  &lt;div class="legend"&gt;
  4. &lt;a class="legt" facility="bldg4" work="bldg4work"&gt;Primary Clarifiers - West&lt;/a&gt;&lt;br /&gt;
  7. &lt;a class="legt" facility="bldg7" work="bldg7work"&gt;Secondary Clarifiers&lt;/a&gt;&lt;br /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $("a.dot, a.legt").on({click: function(){
  $("a.dot").removeClass("selected");
  $(this).addClass("selected");
  $("a.legt").removeClass("selected");
  $(this).addClass("selected");
  var work = ".work_detail#" + $(this).attr("work");
  var htmlCode = $(work).html();
  $(".detail_container").fadeOut(500, function(){
  $(".detail_container .work_detail").html(htmlCode);
  $(".detail_container").fadeIn(500);
  });
  }
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  css
  .map_container a.dot {
  display: block;
  height: 20px;
  width: 20px;
  background-image: url(../images/dots.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  cursor: pointer;
  position: absolute;
  }
  .map_container a.dot:hover {
  background-position: 0px -20px;
  }
  .map_container a.dot.selected {
  background-position: 0px -40px;
  }   
  .map_container a.legt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #F00;
  font-weight: bold;
  text-decoration: none;
  }
  .map_container a.legt:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #FF0;
  font-weight: bold;
  background-color: #630;
  text-decoration: none;
  }
  .map_container a.legt.selected {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #0F0;
  background-color: #630;
  }
  </code></pre>
  
  <p>I tried this for the hover -- I know the syntax is probably not correct, but am I close?</p>
  
  <pre><code>    $('a.dot[facility*]').hover(function(){
      $('a.legt[facility*]').toggleClass('a.legt.hover');
      });
  </code></pre>