title: display text when hovering with jquery
body: <p>I'm new to jquery and attempting to display text when hovering over a div. I have a basic html page right now with a couple squares, one of which rotates when a button is clicked. Now, in this same square (div2) I'd like for some text to be displayed when hovering over this.  </p>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;LINK href="divtest.css" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src=divtest.js&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="border"&gt;
  &lt;div id="div1"&gt;
  &lt;div id="div2"&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="button" value="button" onclick="rotate()" /&gt;
  
  &lt;script&gt;
  $("id=div2").hover(
  function () {
      $(this).append($("&lt;span&gt; HOVERING!!!!! &lt;/span&gt;"));
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I identify that I want the text "HOVERING!!!" to be displayed over div2. </p>
  
  <p>Here's the CSS</p>
  
  <pre><code>#border{
  position:relative;
  border-style:solid;
  border-width:5px;
  border-color:black;
  width:1366;
  height:768
  }
  
  #div1{
  position:relative;
  background-color: blue;
  display:block;
  height:500px;
  width:500px;
  left:350px;
  }
  
  #div2{
  position:relative;
  background-color: green;
  display:block;
  height:400px;
  width:400px;
  top:50px;
  left:50px;
  }
  </code></pre>
  
  <p>And now for my .js page</p>
  
  <pre><code>var obj = "div2";
      var angle = 0;
      var interval = 100;
      increment = 5;
  
     function rotate() {
      $('#' + obj).css({
          '-moz-transform': 'rotate(' + angle + 'deg)',
          'msTransform': 'rotate(' + angle + 'deg)',
          '-webkit-transform': 'rotate(' + angle + 'deg)',
          '-o-transform': 'rotate(' + angle + 'deg)'
      });
          angle += increment;
          setTimeout(rotate, interval);
      }
  </code></pre>