title: jQuery .toggleClass not working
body: <p>file name is index.js</p>
  
  <pre><code>$(document).ready(function() {
      $("div").hover(function(){
          $(this).toggleClass("multi")
      }
  }
  </code></pre>
  
  <p>file name is stylesheet.css</p>
  
  <pre><code>    a{
  text-decoration:none;
  color:green;
  }
  a:hover{
  text-decoration:none;
  color:blue;
  }
  a:visited{
  text-decoration:none;
  color:green;
  background-color:red;
  }
  div{
  font-family:Garamond;
  border:3px solid blue;
  width:75px;
  height:45px;
  margin:3px;
  a:nth-child(5) div{
  border-color:red;
  }
  .multi{
  border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%;
  width:120px
  }
  </code></pre>
  
  <p>file name is index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='index.js'&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"/&gt;
  &lt;a href="http://www.criticalsoftware.com/en/homepage"&gt;&lt;img src="http://tse3.mm.bing.net/th?id=OIP.M6306c8d673012b728da1d23d43adbcdfo0&amp;w=134&amp;h=135&amp;c=7&amp;rs=1&amp;qlt=90&amp;o=4&amp;pid=1.1"/&gt;&lt;/a&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="day1.html"&gt;&lt;div&gt;&lt;h1&gt;day 1&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="day2.html"&gt;&lt;div&gt;&lt;h1&gt;day 2&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="day3.html"&gt;&lt;div&gt;&lt;h1&gt;day 3&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="day4.html"&gt;&lt;div&gt;&lt;h1&gt;day 4&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="finalday.html"class=""&gt;&lt;div&gt;&lt;h1&gt;final day&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The jQuery is having no effect on the resulting page. I have included all css that could effect the div. Any help would be greatly appreciated.</p>