title: how do i display information associated with map markers with mouse hover using css?
body: <p>I've been trying to figure out how to display info. on an interactive map so that when the mouse is hovered over on location, that info comes up, goes away when the mouse is moved and when the mouse is hovered over another location that info comes up. This is a homework assignment, but I've tried everything I can think of and what I could find on the web. I'm very much a beginner and don't understand what I am missing. I need so guidance Please.</p>
  
  <pre><code>div#battleMap {             
      position: relative; }  
  
  a.battleMarkers {             
      position: absolute; }         
  
  a.battleMarkers {             
      position: absolute; }     
  
  
  div &gt; a#marker1 {           
      left: 340px;
  }
  div &gt; a#marker2 {
      top: 194px;
      left: 358px;
  }
  div &gt; a#marker3 {
      top: 202px;
      left: 400px;
  }
  div &gt; a#marker4 {
      top: 217px;
      left: 452px;
  }
  div &gt; a#marker5 {
      top: 229px;
      left: 498px;
  }
  div &gt; a#marker6 {
      top: 246px;
      left: 544px;
  }
  
  a.battleMarkers {      
       display: none;                         
  }     
  </code></pre>
  
  <p>Here is the  Instruction for this step:
  Since the map information follows the map marker in the HTML file, use the following selector: a.battleMarkers:hover + div.mapInfo. Write a style rule for this selector that sets its display property to a block.</p>
  
  <p>Here is my last attempt: I've been trying for hours re-reading, searching the web, and re-working my code for hours. I don't know what to do.</p>
  
  <pre><code>a#marker1:hover + div#info1 {
      position: absolute;
      display: block;
  } 
  </code></pre>
  
  <p>Here are 2 pieces of HTML for the map information:`enter code here:</p>
  
  <pre><code> &lt;div id="battleMap"&gt;
       &lt;img src="ss_map.png" id="mapImage" alt="battle map" /&gt;
       &lt;a id="marker1" class="battleMarkers" href="#marker1"&gt;&lt;img src="ss_marker.png" alt="" /&gt;&lt;/a&gt;
       &lt;div class="mapInfo" id="info1"&gt;
  </code></pre>
  
  <p>
           </p>