title: Jquery "the event object" trying to change "CSS" of <div> tag not working
body: <p>index.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;chapter 5&lt;/title&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div &gt;
          &lt;p&gt;this is a paragraph&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>$(function() {
      $("div").on("hover", function(event) {
          if(event.type === "mouseenter") {
              $(this).css("background", "blue");
          } 
          else {
              $(this).css("background", "red");
          }
      });
  });
  </code></pre>
  
  <p>so according to my Jquery: when I bring mouse over to  tags it should change its colour to red and when any other even inside  tag except mouse enter it should change to blue. But nothing is happening?</p>
  
  <p>I have tried other functions with event which works fairly well I can not understand why this one is not working do I have to do something with "css" maybe?</p>