title: How would I show text inside a span tag when hovering over a different element?
body: <p>I have a webpage set up that has multiple DIV tags in a grid like table. I would like to know if it's possible by using CSS to show text when mousing over a DIV or IMG or A tag. I could use any of those 3 to make it happen since one of my DIV tags holds just the IMG which is also a hyperlink to a new page. A sample of one of my rows in my page is setup kinda like this:</p>
  
  <pre><code>    &lt;div class="Home-06"&gt;
      &lt;a href="image1link.html"&gt;
      &lt;img src="images/image1.jpg" width="250" height="250" alt="" 
          style="border-width: 0px"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="Home-07"&gt;
      &lt;span&gt;Text for Image 1&lt;/span&gt;&lt;span&gt;Text for Image 2&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="Home-08"&gt;
      &lt;a href="image2link.html"&gt;
      &lt;img src="images/image2.jpg" width="250" height="250" alt="" 
          style="border-width: 0px"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to make the middle DIV "Home-07" with my span tags display different text when hovering over "Home-06" and "Home-08".</p>
  
  <p>My CSS:</p>
  
  <pre><code>div.Home-06 {
  position:absolute;
  left:102px;
  top:450px;
  width:250px;
  height:250px;
  }
  div.Home-07 {
  position:absolute;
  left:352px;
  top:450px;
  width:320px;
  height:250px;
  background-color:#000000;
  }
  div.Home-08 {
  position:absolute;
  left:672px;
  top:450px;
  width:250px;
  height:250px;
  }
  </code></pre>