title: jQuery mouseover not working in MVC3
body: <p>Earlier today I asked a question and got a good answer <a href="https://stackoverflow.com/questions/12493912/jquery-pause-delay-timer-on-mouseover/12494127#comment16814309_12494127">here</a>. However when I added the code to my MVC3 project the jQuery <code>mouseover</code> event never gets fired. The jsFiddle in the previous question (<a href="http://jsfiddle.net/vypTA/7/" rel="nofollow noreferrer">here</a>) works fine, but not when I add the code into my script file.</p>
  
  <p>Therefore I decided to modify my <code>_Layout</code> file with a much simpler test and that also fails to work with the <code>mouseover</code> event. Below is my simple test:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-1.8.1.js")" type="text/javascript"&gt;&lt;/script&gt;    
      &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.js")" type="text/javascript"&gt;&lt;/script&gt;   
      &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt;   
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script&gt;
          $(document).ready(function () {   
              $("#testtest").mouseover(function () {
                  $("#testtest").text("OVER");
              }).mouseout(function () {
                  $("#testtest").text("OUT");
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="page"&gt;
          &lt;header&gt;
              //SNIP
          &lt;/header&gt;
          &lt;section id="main"&gt;
              &lt;div&gt;
  
              &lt;/div&gt;
              @RenderBody()
          &lt;/section&gt;
          &lt;footer&gt;
              //SNIP
          &lt;/footer&gt;
      &lt;/div&gt;
      &lt;div style="clear: both; height: 50px"&gt;&lt;/div&gt;
      &lt;div id="#testtest" style="background-color: Red; height: 100px; width: 400px; display: block"&gt;
          NOTHING
      &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have also tried the <code>mouseenter</code> and <code>mouseleave</code> events, but no change.</p>
  
  <p>Can anyone help me out here? I'm sure I'm missing something simple here, but I can't figure it out!</p>
  
  <p>Thanks very much.</p>