title: Using CSS hover class to hover over a link and display an overlay image elsewhere on the page
body: <p>I was trying to figure out if there was a way to use CSS to hover over a link and make an overlay of an image show elsewhere on the page. I am making a website that has a map, and what I want to accomplish is that when they hover over a link to the corresponding location the map would sort of highlight the location of what it is they are hovering over to get a better understanding of where the place is and not have to search for it. What I am getting now is that I have to hover over the location on the image and then I get the effect but I want the effect when I hover over the link.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thank you</p>
  
  <p>I apologize for the lack of code you guys. </p>
  
  <p>Here are the divs that I am using to create some simple overlays. Just some color blocks. </p>
  
  <pre><code>&lt;div class="roomOverlay blue" id="conf_sanchez"&gt;&lt;/div&gt;
      &lt;div class="roomOverlay red" id="conf_CIO"&gt;&lt;/div&gt;
      &lt;div class="roomOverlay green" id="conf_10F"&gt;&lt;/div&gt;
      &lt;div class="roomOverlay brown" id="Fuster"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and here is the css</p>
  
  <pre><code>.blue:hover { background-color: Blue; }
  .red:hover { background-color: red; }
  .green:hover { background-color: green; }
  .brown:hover { background-color: brown; }
  
  #conf_sanchez {
  height: 104px;
  width: 96px;
  left: 876px;
  top: 14px;}
  
  #conf_CIO {
  height: 146px;
  width: 69px;
  left: 7px;
  top: -92px;}
  
  #conf_10F {
  height: 67px;
  width: 115px;
  left: 194px;
  top: 193px;}
  
  #Fuster {
  height: 139px;
  width: 129px;
  left: 180px;
  top: -17px;}
  </code></pre>
  
  <p><strong>FIXED</strong> What I had to do was a script since it became difficult positioning with the HTML and CSS. I used the data-overlay tag in my HTML as so. </p>
  
  <pre><code> &lt;dl&gt; &lt;dt&gt;&lt;a href="#" **data-overlay="#Fuster"**&gt;Fuster Conference Room - W Side behind small break room&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;-Projector&lt;/dd&gt;
          &lt;dd&gt;-Computer&lt;/dd&gt;
          &lt;dd&gt;-Polycom&lt;/dd&gt;
          &lt;dd&gt;-Seats 8-10 people&lt;/dd&gt;
          &lt;dd&gt;-4 White Boards&lt;/dd&gt;
      &lt;/dl&gt;
  </code></pre>
  
  <p><strong>JQuery Script:</strong></p>
  
  <pre><code>  $(function () {
      $('.roomOverlay').css("visibility", "hidden");
      $('a').hover(function () {
          var overlay = $(this).data("overlay");
          $(overlay).css("visibility", "visible");
      }, function () {
          var overlay = $(this).data("overlay");
          $(overlay).css("visibility", "hidden");
      });
  });
  </code></pre>
  
  <p>Here is the <a href="http://cdpn.io/DbAvF" rel="nofollow">page showing the result</a> for it. It does not show image for security purposes but the effect works on the empty image. :)</p>